jQuery仿微博向下滚动效果

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

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


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(); 
                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; 
}

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:jquery

文章链接:http://www.gouguoyin.cn/js/31.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情