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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery分割字符串的方法
Jun 24 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
详解Vue方法与事件
Mar 09 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
js实现tab切换效果
2017/02/16 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
React实现全选功能
2020/08/25 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
极简的HTML5模版
2015/07/09 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
UML设计模式笔试题
2014/06/07 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
市三好学生主要事迹
2014/01/28 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
广播体操比赛口号
2014/06/10 职场文书
政府个人对照检查材料
2014/08/28 职场文书
个人委托函范文
2015/01/29 职场文书
放射科岗位职责
2015/02/14 职场文书
趣味运动会赞词
2015/07/22 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Java集成swagger文档组件
2021/06/28 Java/Android