您的位置：首页 > 编程技术 > js  >  JS实现的新浪微博大厅文字内容滚动效果代码

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

 更新时间：2015年11月8日 20:27  点击：2358

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-sina-txt-scroll-tweets-slide-codes/

具体代码如下：

<!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程序设计有所帮助。

[!--infotagslink--]

相关文章

  • 不打开网页直接查看网站的源代码

    　　有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 　　这样可以有效地防止误入恶意网站... 　　在浏览器地址栏输入： 　　view-source:http://...2016-09-20

  • php 调用goolge地图代码

    <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • php 取除连续空格与换行代码

    php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25

  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25

  • PHP实现清除wordpress里恶意代码

    公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23

  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08

  • PHP开发微信支付的代码分享

    微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • php怎么用拼音 简单的php中文转拼音的实现代码

    小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06

  • CI框架开发新浪微博登录接口源码完整版

    首先来看下流程：流程原理： 1.通过code获得access_token通过授权，并获取用户的信息（包括用户u_id）(这个u_id在后面的第三方登录表里面叫sina_id，那个表是需要自己建的) 2.查询第三方登录表，如果不存在用户sina_id,分2...2014-05-31

  • php导出csv格式数据并将数字转换成文本的思路以及代码分享

    php导出csv格式数据实现：先定义一个字符串 存储内容，例如 $exportdata = '规则111,规则222,审222,规222,服2222,规则1,规则2,规则3,匹配字符,设置时间,有效期'."/n";然后对需要保存csv的数组进行foreach循环，例如复制代...2014-06-07

  • ecshop商品无限级分类代码

    ecshop商品无限级分类代码 function cat_options($spec_cat_id, $arr) { static $cat_options = array(); if (isset($cat_options[$spec_cat_id]))...2016-11-25

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。 当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点...2013-10-13

  • js实现选中页面文字将其分享到新浪微博

    一、功能简述 正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接： 不过我觉得这些分享基本上...2015-11-08

  • vue项目,代码提交至码云,iconfont的用法说明

    这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30