jquery实现仿新浪微博评论滚动效果

本文实例讲述了jquery实现仿新浪微博评论滚动效果。分享给大家供大家参考。具体如下：

这里使用jquery实现评论滚动效果，仿新浪微博大厅文字滚动效果，以前有不少人膜拜的效果，现在被模仿的到处都是啦，呵呵，今天这个仍是模仿的，评论和头像一起向下滚动，最新的一条带渐变淡入淡出，无缝循环向下滚动，觉得不错的就顶下。

点击此处预览效果：

http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '标题漂亮的评论滚动效果，带头像图片一起滚动/titlestylehtml，body{font-family:Verdana，sans-serif；font-size :12 px} ul { padding:0 } a :链接{ text-decoration : none}.box { padding:30px 0 30px 0背景# C05732}。box _ content a { color : # E6E5CC；}.box _ content { clear:both飞越：隐藏；宽度宽度：287pxpadding:0 0 0 30px}。r _ comments {位置：相对；高度：262px}。r _ comments ul {列表样式：无外面无；边距-左侧：0像素；边框-top:1px虚线# a04524}。r _ comments ul Li { padd :5 px 0px；线高：20 px边框-底部：1px虚线# 8C391C边框-top:1px虚线# D08364}。FFF；border:1px固体# 999;height :32 pxfloat : leftpadding :1 pxmargin 33604 px 0 4px 0 }/style/head dydiv class=' box ' div class=' box _ content r _ comments ' ul style=' margin-top : 0px；'id=' RC滑块' Li style=' opa city 3360 0.6'img alt='公元零零零000 ' src=' http : images/0。png ' class=' avatar avatar-32 photo ' height=' 32 ' width=' 32 ' a href=' # '零零零000:br正在学习wordpress，正好找到这篇/ABR/Li Li style=' opa city 3360 0.6；'img alt='大世界壹壹壹111 ' src=' http : images/1。png ' class=' avatar avatar-32 photo ' height=' 32 ' width=' 32 ' a href=' # '壹壹壹111:br谷歌搜了下进来了。大牛/ABR/Li Li style=' opa city 3360 0.6；'img alt='天涯海角22 ' src=' http : images/2。png ' class=' avatar avatar-32 photo ' height=' 32 ' width=' 32 ' a href=' # '贰贰贰222:br嘿嘿，看了你的那篇《漂亮的评论滚动效果》/ABR/Li Li style=' opa city 3360 0.6；'img alt='小小少年src=' http : images/3。png ' class=' avatar avatar-32 photo ' height=' 32 ' width=' 32 ' a href=' # '打跑小日本-叁叁叁333:br请教个问题，使用媒体查询后/ABR/Li Li style=' opa city 3360 0.6；img alt='大块头儿郎4 ' src=' http : images/4。png ' class=' avatar avatar-32 photo ' height=' 32 ' width=' 32 ' a href=' # '大块头儿郎4:br吹吧，这还挺不错，这个可以测试一下/ABR/Li/ul/div/div脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' jquery(函数(a){ a(function(){ var b；一个(' # rcslider ').悬停(function() { clearInterval(b) }，function(){ b=setInterval(function(){ var b=a(' RC slider ')，c=b.find('li:last ')).高度();b .动画({ marginto p : c 3 ' px ' }，1e3，函数(){ b.find('li:last ').前置到(b)，b.find('li:first ').hide()，b.css({ marginTop: 0 })，b.find('li:first ').fadeIn(1e3) }) }，3e3) }).触发器(“mouse leave”)})，一个（文档)。就绪(函数(){ a(' RC滑块Li ')).CSS({ opa city 3360。6 ' })，a(' # r slider Li ').悬停（函数(){ a(this)).停止()。fadeTo(300，1) }，function() { a(this).停止()。fadeTo(300，6)})})});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。