jQuery仿微博向下滚动效果

本文以新浪微博信息滚动实例为大家讲解如何使用jQuery来实现图文信息向下滚动效果。

分类：图片代码 > 图片滚动难易：初级

查看演示下载资源下载积分： 20 积分

我们以新浪微博信息滚动为实例，html中包含了多条微博图文信息，结构如下：

<div id="content"> 
   <ul> 
    <li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/5579422785/50/5723046439/0" /></a> <h4><a href="#">腐女大本营</a></h4> <p>被禁的62部动漫下载，随手转发传递正能量！！！ </p> </li> 
    <li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/3876734080/50/22898583876/1" /></a> <h4><a href="#">思想聚焦</a></h4> <p>一位高三老师对高中“早恋”的看法</p> </li> 
    <li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/1615743184/50/5607220127/0" /></a> <h4><a href="#">我的脑壳长了个包</a></h4> <p>哪位大神配的音，说出来我一定跪拜为湿.....</p> </li> 
    <li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/1097201945/50/40022036076/1" /></a> <h4><a href="#">徐昕</a></h4> <p>40年前的今天，张志新被割喉；40年后，文革的影子还在，但不可能回去。必须彻底反思文革，呼吁开放文革档案</p> </li> 
    <li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/1816011541/50/40037057877/0" /></a> <h4><a href="#">张小娴</a></h4> <p>沒有一個人是完全的。所謂幸福，是在於認識一個人的界限而愛這個界限。─── 《約翰 . 克利斯朵夫》</p> </li> 
    <li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/3160227432/50/5716965285/1" /></a> <h4><a href="#">思想箴言</a></h4> <p>【你舍得对人家好，人家才会舍得对你好】舍得：母亲给我一生的最珍贵做人礼物 ，被这个朴实的故事感动哭了。</p> </li> 
   </ul> 
</div>

jQuery

原理：我们定义一个滚动函数scrtime()，当鼠标滑向滚动区域时，停止滚动（即清除scrtime），当鼠标离开时继续滚动，滚动scrtime()的过程中，让最后一个li元素定时插入第一个li元素的上方，采用animate方法来改变li的高度和透明效果，实现动画加载效果，最后定时每隔3秒钟执行一次滚动。

$(function(){ 
    var scrtime; 
    $("#content").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秒内容将从上部淡入，完成内容滚动效果。

补充

CSS实现圆角方法：

#content img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}