WEB页面需要展示网站最新信息,如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。
HTML
我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下:
<div id="con"> <ul> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/ 50/1290146312/1" /></a> <h4><a href="#">李开复</a></h4> <p>【领导力的四个境界】境界一:员工因为你的职位而服从你;境界二:员工因为你的能力而服从你; 境界三:员工因为你的培养而服从你,他们感恩于你对他们的尊重、培养和付出; 境界四:员工因为你的为人、魅力、风范、价值观而拥戴你。(转)</p> </li> ...更多内容... </ul> </div>
CSS
我们用CSS来美化页面布局,以下是数据滚动区的CSS代码,当然大家可以修改css定制不同的外观效果。
ul,li{ list-style-type:none;} #con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative; border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;} #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} #con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; } #con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;} #con ul li h4{height:22px; line-height:22px; margin-left:60px} #con ul li p{ margin-left:60px;line-height:22px; }
jQuery
原理:我们定义一个滚动函数scrtime(),当鼠标滑向滚动区域时,停止滚动(即清除scrtime),当鼠标离开时继续滚动,滚动 scrtime()的过程中,让最后的li元素定时插入第一个li元素的上方,采用animate方法来改变li的高度和透明效果,实现动画加载效果,然 后定时每隔3秒钟执行一次滚动。
$(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime);//停止滚动 },function(){ scrtime = setInterval(function(){ var ul = $("#con ul"); var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度 ul.animate({marginTop : liHeight+40 +"px"},1000,function(){ ul.find("li:last").prependTo(ul) ul.find("li:first").hide(); ul.css({marginTop:0}); ul.find("li:first").fadeIn(1000); }); },3000); }).trigger("mouseleave"); });
以上代码实现了一个内容持续向下滚动的效果,每隔3秒内容将从上部淡入,完成内容滚动效果。
补充
1.关于图片自动圆角处理,我们可以使用jquery.corner.js这个插件,使用灵活,兼容各浏览器,这个插件下载包里已经为您准备好了。当然你也可以使用css3来控制圆角。
2.本站有很多介绍关于前端滚动效果的文章,如果您感兴趣可以点击滚动效果。
相关推荐
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
Query图文结合滚动切换效果,这款jQuery图文切换插件比较普通,但是一款很实用的jQuery焦点图。
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的,代码简单使用。
运用JQUery原生方法实现文字上下循环滚动效果,我这里的是文字,你也可以换成图片。
jquery实现的图文滚动效果,图文内容经过指定的间隔时间自动向下滚动显示,效果非常酷。有需要的小伙伴可以参考下。
JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果
jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
CSS+jQuery箭头控制图文左右滚动代码。
jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。
利用jQuery实现的图片超酷的滚动效果 本人做了小小的修改
用jQuery实现列表项滚动的效果
jquery实现点击左侧栏目右侧随机变化的图文混排滚动效果.zip
jquery实现单行滚动效果
jquery新浪微博图文列表滚动切换效果代码
Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> </form> Javascript操作代码: $(document)....
这里是一个比较简单的用jQuery实现定位滚动导航效果的代码,如果需要可以下载学习。
jQuery图片左右滚动效果代码是一款带左右箭头,自动轮播的jQuery图片切换特效。