jQuery实现的向下图文信息滚动效果

2024-05-06 16:19:10

字体：大中小

来源：转载

供稿：网友

jquery实现的图文滚动效果,图文内容经过指定的间隔时间自动向下滚动显示,效果非常酷。有需要的小伙伴可以参考下。

WEB页面需要展示网站最新信息，如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果，我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。

我们以新浪微博信息滚动为背景，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");

});