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中面向对象技术的模拟
Sep 25 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
jquery中键盘事件小结
Feb 24 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
一些常用的php函数
2006/12/06 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jQuery中:has选择器用法实例
2014/12/30 Javascript
js同源策略详解
2015/05/21 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python中创建二维数组
2018/10/17 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
关于打架的检讨书
2014/01/17 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby