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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
再论Javascript的类继承
Mar 05 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python callable内置函数原理解析
2020/03/05 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
自我管理的活动方案
2014/08/25 职场文书
铣工实训报告
2014/11/05 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
以下牛机,你有几个
2022/04/05 无线电