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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
将查询条件的input、select清空
Jan 14 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
require.js的用法详解
Oct 20 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
javascript中的this作用域详解
Jul 15 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 fckeditor 调用的函数
2009/06/21 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python机器学习库xgboost的使用
2020/01/20 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
致跳高运动员广播稿
2014/01/13 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android