jQuery实现web页面向下推送图文信息滚动效果
WEB页面需要展示网站最新信息，如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果，我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。
jQuery
原理：我们定义一个滚动函数scrtime()，当鼠标滑向滚动区域时，停止滚动（即清除scrtime），当鼠标离开时继续滚动，滚动scrtime()的过程中，让最后的li元素定时插入第一个li元素的上方，采用animate方法来改变li的高度和透明效果，实现动画加载效果，然后定时每隔3秒钟执行一次滚动。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(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秒内容将从上部淡入，完成内容滚动效果。
THE END
