jQuery实现的向下图文信息滚动效果
WEB页面需要展示网站最新信息,如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。
我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下:
<divid="con"> <ul> <li><ahref="#"class="face"><imgsrc="http://tp3.sinaimg.cn/1197161814/ 50/1290146312/1"/></a> <h4><ahref="#">李开复</a></h4> <p>【领导力的四个境界】境界一:员工因为你的职位而服从你;境界二:员工因为你的能力而服从你; 境界三:员工因为你的培养而服从你,他们感恩于你对他们的尊重、培养和付出; 境界四:员工因为你的为人、魅力、风范、价值观而拥戴你。(转)</p> </li> ...更多内容... </ul> </div>
CSS
我们用CSS来美化页面布局,以下是数据滚动区的CSS代码,当然大家可以修改css定制不同的外观效果。
ul,li{list-style-type:none;} #con{width:760px;height:400px;margin:30pxauto10pxauto;position:relative; border:1px#d3d3d3solid;background-color:#fff;overflow:hidden;} #conul{position:absolute;margin:10px;top:0;left:0;padding:0;} #conulli{width:100%;border-bottom:1px#cccdotted;padding:20px0;overflow:hidden;} #conullia.face{float:left;width:50px;height:50px;margin-top:2px;padding:2px;} #conullih4{height:22px;line-height:22px;margin-left:60px} #conullip{margin-left:60px;line-height:22px;}
jQuery
原理:我们定义一个滚动函数scrtime(),当鼠标滑向滚动区域时,停止滚动(即清除scrtime),当鼠标离开时继续滚动,滚动scrtime()的过程中,让最后的li元素定时插入第一个li元素的上方,采用animate方法来改变li的高度和透明效果,实现动画加载效果,然后定时每隔3秒钟执行一次滚动。
$(function(){ varscrtime; $("#con").hover(function(){ clearInterval(scrtime);//停止滚动 },function(){ scrtime=setInterval(function(){ varul=$("#conul"); varliHeight=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秒内容将从上部淡入,完成内容滚动效果。
补充
关于图片自动圆角处理,我们可以使用jquery.corner.js这个插件,使用灵活,兼容各浏览器,这个插件下载包里已经为您准备好了。当然你也可以使用css3来控制圆角。
以上所述就是本文的全部内容了,希望大家能够喜欢。