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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 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 之Section与Cookie使用总结
2012/09/14 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
理解Python中函数的参数
2015/04/27 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
聚美优品广告词改编
2014/03/14 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015大学生求职信范文
2015/03/20 职场文书
工作自我推荐信范文
2015/03/25 职场文书
信息简报范文
2015/07/21 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android