-
新闻上滚动html
2019-12-31 21:56:12标题 新闻上滚动无缝连接切换-HTML css样式## /*新闻动态样式begin*/ .notice_active{ float: left; width: 100%; height: 42px; overflow: hidden; position: relative; box-sizing: border-box; white-...标题 新闻上滚动无缝连接切换-HTML
css样式##
/*新闻动态样式begin*/ .notice_active{ float: left; width: 100%; height: 42px; overflow: hidden; position: relative; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; background-color: rgb(229,245,252); margin-top: 20px; } .notice_active>ul>li{ line-height: 42px; display: flex; align-items: center; font-size: 16px; } .notice_active>ul>li>img{ width: 0.4rem; margin-right: 0.2rem; } .tooLength{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
html模板
<!--新闻动态begin--> <div class="notice_active"> <ul> <li v-for="item,index in informationDynamicsList"> <span style="margin-left: 12px;width: 80px;"> <a style="color:#00a0e9;" href="/information/infodynamics-list">资讯动态:</a> </span> <span style="width: 84px;color:#939393;" v-html="item.infoPublishTime"></span> <span style="margin:0 24px;width: 767px;"> <a class="tooLength" target="_blank" :href="'/information/information-detail?infoId='+item.id" style="color: #4a4a4a;" v-html="item.title"></a> </span> <span style="float: right;text-align: right;"> <a style="color:#00a0e9;text-decoration: underline;" href="/information/infodynamics-list">查看更多>>></a> </span> </li> </ul> </div> <!--新闻动态end-->
JS模块
//新闻动态上下滚动 //3.方法 function t() { var he = $(".notice_active>ul>li").height();//找到li高 $(".notice_active>ul").animate({ "marginTop": "-" + he }, 500, function () { $(".notice_active>ul").css({ "marginTop": 0 }); //二选一 //复制第一个到最后一个 $(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); //复制第一个到最后一个(多个的情况) $(".notice_active_two>ul>li:eq(0),.notice_active_two>ul>li:eq(1),.notice_active_two>ul>li:eq(2)").appendTo($(".notice_active_two>ul")); }); } //4. 触发方法 //新闻动态 var time = setInterval(function () { t(); }, 5000)
-
用jQuery写新闻标题轮播图解读
2018-03-21 11:37:533.滚动的新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。4.轮播图的运动是基于绝对定...1.先构造轮播图的外部框架,写一个固定的盒子,为了方便查看效果,我给这个盒子添加了外边框属性(border)。
2.在index.html文件中引入jQuery文件,将写好的css样式引入。
3.滚动的新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。
4.轮播图的运动是基于绝对定位之上的,如果是上下滚动,变的是top的值;如果是左右滚动,变的是left的值。
5.此时要考虑如果滚动到最后一个li时,如何让他从第一个开始继续轮播,且不出现闪动的状态呢?此时就是需要利用人的视觉差,比如本来需要展示的是4个标题,那么你就要写5个li,第五个li的内容与第一个一致。写一个全局变量,用来存放当前的li的序号,当这个全局变量的值等于最后一个li的数值时,让其等于1,同时将top值修改为0,这样内容就会从第一个开始,,且从视觉上来看是连续的轮播。
6.每一次的运动的top值都是之前li的高度乘以需要隐藏的数量。用定时器控制自动轮播的时间。
<script> $(function () { var c = 0; var timer = setInterval(function () { c++; if(c == 4){ $(".box ul").css({"top":'0px'}); c = 1; }; var t = c*-35; $(".box ul").stop().animate({'top':t+'px'},1000); },1000); }); </script>
7.也可以加上鼠标移入,滚动暂停,移出继续执行。
$(".box ul").stop().mouseenter(function () { clearInterval(timer); });
8.css样式如下:
* { margin: 0; padding: 0; } .box { width: 400px; height: 35px; position: relative; margin: 20px auto; border: 2px solid #4ecc0e; overflow: hidden; } .box ul { width: 400px; position: absolute; top: 0; } .box ul li { list-style: none; width: 400px; height: 35px; line-height: 35px; text-align: center; }
9.页面布局如下:
<body> <div class="box"> <ul> <li style="background-color: #ffc9e6">毛毛很可爱</li> <li style="background-color: #93faba">萌萌哒</li> <li style="background-color: #f850fa">美美哒</li> <li style="background-color: #35dcff">酷酷滴</li> <li style="background-color: #ffc9e6">我很可爱</li> <li style="background-color: #ffc9e6">毛毛很可爱</li> </ul> </div>
10.效果图:
-
css3+html5——新闻列表设计
2018-06-11 19:10:55随便写了个仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动而滚动)、当鼠标移动到图片上的时候实现图片的放大功能:大概效果如下: 代码如下:<!DOCTYPE html> <html lang="en...仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动而滚动)、当鼠标移动到图片上的时候实现图片的放大功能:
大概效果如下:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻列表</title> <style type="text/css"> *{ margin: 0; padding:0; } .wrap{ width: 600px; margin: 0px auto; } .menu{ width: 600px; height: 30px; background: cornflowerblue; position: sticky; top:0px; } .menu ul li{ float: left; list-style-type: none; padding: 0 40px; } .content ul li img:hover{ transform: scale(1.2);/*当鼠标移动到图片上时实现放大功能*/ } .content ul li{ height: 100px; overflow: hidden; border-bottom: 1px solid lavender; background: white; list-style-type: none; transition-duration: 0.5s; margin: 10px 10px 5px 0; } .content ul li:hover{ background-color: lavender; transition-duration: 0.5s; } .content .left{ overflow: hidden;/*隐藏溢出图片内容*/ transition-duration: 0.5s; width: 140px; height:80px; /*background: green;*/ float: left; margin-right:20px; } .content .right{ width:400px ; float: left; /*background: pink;*/ } .right_top{ height:60px; } .right_bottom{ margin_top:50px; } .right_bottom_left span{ color: darkgray; font-size: 12px; } </style> </head> <body> <div class="wrap"> <div class="menu"> <ul> <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> </ul> </div> <div class="content"> <ul> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new2.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> <li> <div class="left"><img src="../img/new1.png" alt=""></div> <div class="right"> <div class="right_top"> <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3> </div> <div class="right_bottom"> <div class="right_bottom_left"> <span>诺伊尔</span> <span>世界杯</span> <span>德国</span> <span>|</span> <span>7小时前</span> </div> </div> </div> </li> </ul> </div> </div> </body> </html>
-
css空白处理and编辑新闻列表的流程
2020-03-25 19:57:041级标题<!– 1:空白空间的处理 white-space:; pre pre-wrap pre-line inherit 继承! nowrap 不让文本换行 2:溢出属性(控制内容溢出时候的显示方式): overflow属性: auto 当内容超出的时候有滚动...1级标题<!–
1:空白空间的处理 white-space:; pre pre-wrap pre-line inherit 继承! nowrap 不让文本换行 2:溢出属性(控制内容溢出时候的显示方式): overflow属性: auto 当内容超出的时候有滚动条,没有超出的时候没有滚动条 scroll 添加滚动条 hidden 溢出隐藏! inherit 继承! 拓展: overflow-x : hidden; overflow-y : hidden; 3:text-overflow:ellipsis/clip ellipsis 省略号显示 clip 没有省略号 --><!-- 控制单行文本,溢出 省略号显示: 1:white-space:nowrap; 不换行 2:overflow:hidden; 溢出的内容隐藏。 3:text-overflow:ellipsis 溢出的内容省略号显示 4:容器要有宽度!!!
-
JQuery&CSS;&CSS;+DIV实例大全.rar
2018-08-13 12:03:5213.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17.... -
JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)
2018-08-13 13:37:4313.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17.... -
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
2012-10-11 20:26:2713. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ... -
无缝文字滚动
2013-11-22 10:38:56一个常见的无缝文字滚动,结合CSS构建的区域形成即时新闻列表,与常见滚动有所不同的是,我们增加了手动控制,即:如果文字滚动错过了想要看的文章标题,您可以按向上或向下的控制按钮进行返回操作。 文章源自:... -
CSS命名规范
2013-04-19 14:31:00main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小... -
Html+Css命名规范
2020-08-04 14:09:27标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角:corner 横幅广告: banner 子菜单: subMenu 搜索: search 搜索框: searchBox 登录: login 登录条:loginbar 工具条: toolbar... -
id、css命名规范
2019-10-08 14:41:46main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小... -
精通CSS+DIV网页样式与布局视频教材
2013-12-25 17:03:333.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.4.1 段落的水平对齐方式 3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置... -
JavaScript_JQuery_CSS_DIV漂亮的实例
2013-12-29 12:46:3213. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ... -
100多个JQuery效果示例(实例)div+css+javascrpit
2013-04-09 10:01:1113. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ... -
增强SEO的div+css命名规则
2015-09-20 22:25:00页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search...tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:n... -
JS、JQuery、CSS+DIV实例大全part2(共两卷此卷为part2)
2011-12-09 11:18:5113. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery... -
JS、JQuery、CSS+DIV实例大全part1(共两卷此卷为part1)
2011-12-09 11:15:4813. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery... -
jquery 无限循环滚动,文字图片皆可,IE6,7,8,FF8测试无误
2014-08-29 16:26:52有人说原生js写的有兼容问题,我在网上查了查,此类型的代码有很多(高手还是很多的),但是写的太复杂,最近正好在看《锋利的jquery》,书中有这样的例子,书中的例子是新闻标题向上无缝滚动,我发现稍微一改就能向... -
css 属性 position:sticky (粘滞的) 制作导航吸顶效果
2019-03-18 11:00:08一、position:sticky (粘滞的) 1.简介 是 position:relation;和 position:fixed ;的结合体. 表现为 当有一个元素设置了 position:sticky的时候,这个元素...一般适合用于新闻资讯类,有标题的部分可以粘滞在边缘,内... -
div+css命名规则-增强SEO
2008-05-22 21:00:00页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动...tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:ne -
【转】SEO优化中的DIV+CSS命名规则
2009-12-04 21:33:00header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:...
收藏数
76
精华内容
30