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


Posted in Javascript onAugust 06, 2015

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

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

点击此处预览效果:

运行效果如下图所示:

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

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>漂亮的评论滚动效果,带头像图片一起滚动</title>
<style>
html,body{font-family:Verdana,sans-serif; font-size:12px;}
ul{padding:0;} 
a:link{text-decoration:none;}
.box {padding:30px 0 30px 0;background: #C05732;}
.box_content a {color:#E6E5CC;}
.box_content {clear:both; overflow:hidden; width:287px; padding:0 0 0 30px;}
.r_comments{position:relative; height:262px;}
.r_comments ul{list-style:none outside none; margin-left:0px; border-top:1px dashed #a04524;}
.r_comments ul li{padding:5px 0px; line-height:20px; border-bottom:1px dashed #8C391C; border-top:1px dashed #D08364;}
.r_comments li img{background:#FFF; border:1px solid#999; height:32px; float:left; padding:1px; margin:4px 4px 0 0;}
</style>
</head>
<body>
<div class="box">
 <div class="box_content r_comments">
 <ul style="margin-top: 0px;" id="rcslider">
  <li style="opacity: 0.6;"><img alt="公元零零零000" src="images/0.png" class="avatar avatar-32 photo" height="32" width="32"> <a href="#">零零零000:<br>
  正在学习wordpress,正好找到这篇</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="大世界壹壹壹111" src="images/1.png" class="avatar avatar-32 photo" height="32" width="32"> <a href="#">壹壹壹111:<br>
  谷歌搜了下进来了。大牛。</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="天涯海角22" src="images/2.png" class="avatar avatar-32 photo" height="32" width="32"> <a href="#">贰贰贰222:<br>
  嘿嘿,看了你的那篇《漂亮的评论滚动效果》</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="小小少年" src="images/3.png" class="avatar avatar-32 photo" height="32" width="32"> <a href="#">打跑小日本-叁叁叁333:<br>
  请教个问题,使用media query后</a><br>
  </li>
  <li style="opacity: 0.6;"><img alt="大块头儿郎4" src="images/4.png" class="avatar avatar-32 photo" height="32" width="32"> <a href="#">大块头儿郎4:<br>
  吹吧,这还挺不错,这个可以测试一下</a><br>
  </li>
 </ul>
 </div>
</div>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
jQuery(function(a) {
 a(function() {
  var b;
  a("#rcslider").hover(function() {
   clearInterval(b)
  },
  function() {
   b = setInterval(function() {
    var b = a("#rcslider"),
    c = b.find("li:last").height();
    b.animate({
     marginTop: c + 3 + "px"
    },
    1e3,
    function() {
     b.find("li:last").prependTo(b),
     b.find("li:first").hide(),
     b.css({
      marginTop: 0
     }),
     b.find("li:first").fadeIn(1e3)
    })
   },
   3e3)
  }).trigger("mouseleave")
 }),
 a(document).ready(function() {
  a("#rcslider li").css({
   opacity: ".6"
  }),
  a("#rcslider li").hover(function() {
   a(this).stop().fadeTo(300, 1)
  },
  function() {
   a(this).stop().fadeTo(300, .6)
  })
 })
});
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
angular4 JavaScript内存溢出问题
Mar 06 Javascript
js数据类型检测总结
Aug 05 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
js实现旋转的星空效果
Nov 01 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
JS实现点击掉落特效
Jan 29 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
You might like
php木马攻击防御之道
2008/03/24 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
js 异步处理进度条
2010/04/01 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
js中new一个对象的过程
2017/02/20 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python中pip的安装与使用教程
2018/08/10 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
pytorch forward两个参数实例
2020/01/17 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
班组长岗位职责
2014/03/03 职场文书
诚信考试承诺书
2014/03/27 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android