JS实现的新浪微博大厅文字内容滚动效果代码


Posted in Javascript onNovember 05, 2015

本文实例讲述了JS实现的新浪微博大厅文字内容滚动效果代码。分享给大家供大家参考,具体如下:

新浪微博大厅滚动tweets-slide,JavaScript实现,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过今天发现这款竟然还要好,不敢独享,希望需要的朋友喜欢哦。

运行效果截图如下:

JS实现的新浪微博大厅文字内容滚动效果代码

在线演示地址如下:

具体代码如下:

<!doctype html>
<html>
<head>
<title>新浪微博大厅滚动tweets-slide</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul, li {margin:0; padding:0;list-style:none}
body {
 margin: 0;
 height: 100%;
 background: #333;
}
.wp {
 position: relative;
 width: 800px;
 height: 400px;
 overflow: hidden;
 margin: 20px auto;
 border: 4px solid #121212;
 background: #fff;
}
.slider {
 position: absolute;
 width: 760px;
 padding: 0 20px;
 left:0;
 top: 0;
}
.fl {float:left}
.slider img {display:block; padding: 2px; border: 1px solid #ccc} 
.slider li {padding: 20px 0; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%}
.slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;}
</style>
<script type="text/javascript">
function H$(i) {return document.getElementById(i)}
function H$$(c, p) {return p.getElementsByTagName(c)}
var slider = function () {
 function init (o) {
  this.id = o.id;
  this.at = o.auto ? o.auto : 3;
  this.o = 0;
  this.pos();
 }
 init.prototype = {
  pos : function () {
   clearInterval(this.__b);
   this.o = 0;
   var el = H$(this.id), li = H$$('li', el), l = li.length;
   var _t = li[l-1].offsetHeight;
   var cl = li[l-1].cloneNode(true);
   cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
   el.insertBefore(cl, el.firstChild);
   el.style.top = -_t + 'px';
   this.anim();
  },
  anim : function () {
   var _this = this;
   this.__a = setInterval(function(){_this.animH()}, 20);
  },
  animH : function () {
   var _t = parseInt(H$(this.id).style.top), _this = this;
   if (_t >= -1) {
    clearInterval(this.__a);
    H$(this.id).style.top = 0;
    var list = H$$('li',H$(this.id));
    H$(this.id).removeChild(list[list.length-1]);
    this.__c = setInterval(function(){_this.animO()}, 20);
    //this.auto();
   }else {
    var __t = Math.abs(_t) - Math.ceil(Math.abs(_t)*.07);
    H$(this.id).style.top = -__t + 'px';
   }
  },
  animO : function () {
   this.o += 2;
   if (this.o == 100) {
    clearInterval(this.__c);
    H$$('li',H$(this.id))[0].style.opacity = 1;
    H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)';
    this.auto();
   }else {
    H$$('li',H$(this.id))[0].style.opacity = this.o/100;
    H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')';
   }
  },
  auto : function () {
   var _this = this;
   this.__b = setInterval(function(){_this.pos()}, this.at*1000);
  }
 }
 return init;
}();
</script>
</head>
<body>
<div class="wp">
 <ul id="slider" class="slider">
  <li><a class="fl" href="javascript:;"><img src="images/u160412.jpg" alt="" /></a>
   <p>曾虑多情损梵行

 入山又恐别倾城


 世间安得双全法


 不负如来不负卿</p>
  </li>
  <li><a class="fl" href="javascript:;"><img src="images/u160412.jpg" alt="" /></a>
   <p>第一最好不相见,如此便可不相恋。
第二最好不相知,如此便可不相思。<br/> 
第三最好不相伴,如此便可不相欠。
第四最好不相惜,如此便可不相忆。<br/> 
第五最好不相爱,如此便可不相弃。 
  </li>
  <li><a class="fl" href="javascript:;"><img src="images/u160412.jpg" alt="" /></a>
   <p>人生若只如初见,何事秋风悲画扇。
等闲变却故人心,却道故人心易变。<br/>
骊山语罢清宵半,泪雨零铃终不怨。
何如薄幸锦衣郎,比翼连枝当日愿。</p>
  </li>
  <li><a class="fl" href="javascript:;"><img src="images/u160412.jpg" alt="" /></a>
   <p>今天天气不错,我们都出来郊游了,可不一会就下起了雨,都淋湿了,但心情很爽噢。<br/>必竟我们不怎么出来玩,一出来就碰到了雨,很荣幸哦!</p>
  </li>
 </ul>
</div>
<script type="text/javascript">
new slider({id:'slider'})
</script>
</body>
</html>

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

Javascript 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
如何防止JavaScript自动插入分号
Nov 05 #Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
javascript常用函数(1)
Nov 04 #Javascript
You might like
php调用shell的方法
2014/11/05 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
简述php环境搭建与配置
2016/12/05 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python3 读取Word文件方式
2020/02/13 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python持续监听文件变化代码实例
2020/07/22 Python
设计模式的基本要素是什么
2014/04/21 面试题
优秀班集体获奖感言
2014/02/03 职场文书
护士岗位职责
2014/02/16 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python基础之文件处理知识总结
2021/05/23 Python