脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS新浪微博大厅文字内容滚动效果

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

 更新时间：2015年11月05日 10:10:34   作者：企鹅  
这篇文章主要介绍了JS实现的新浪微博大厅文字内容滚动效果代码,可实现页面图文元素定时滚动的效果,涉及JavaScript时间函数定时改变页面元素的相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 小程序二次贝塞尔曲线实现购物车商品曲线飞入效果

    小程序二次贝塞尔曲线实现购物车商品曲线飞入效果

    这篇文章主要介绍了小程序二次贝塞尔曲线实现购物车商品曲线飞入效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Three.js开发实现3D地图的实践过程总结

    Three.js开发实现3D地图的实践过程总结

    这篇文章主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • JS代码如何获取map的key

    JS代码如何获取map的key

    这篇文章主要介绍了JS代码如何获取map的key，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 深入理解js 中async 函数的含义和用法

    深入理解js 中async 函数的含义和用法

    async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。接下来通过本文给大家分享js 中async 函数的含义和用法，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    这篇文章主要介绍了BootStrap智能表单实战系列(六)表单编辑页面的数据绑定的相关资料,一般用于编辑页面，本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 使用js判断当前时区TimeZone是否是夏令时

    使用js判断当前时区TimeZone是否是夏令时

    这篇文章主要介绍了js判断当前时区TimeZone是否是夏令时的方法,需要的朋友可以参考下
    2014-02-02
  • Bootstrap基本样式学习笔记之表单(3)

    Bootstrap基本样式学习笔记之表单(3)

    这篇文章主要介绍了Bootstrap学习笔记之表单基本样式的相关资料,为大家分享了三种表单样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 如何基于layui的laytpl实现数据绑定的示例代码

    如何基于layui的laytpl实现数据绑定的示例代码

    这篇文章主要介绍了如何基于layui的laytpl实现数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • TypeScript中Getter/Setter用法详解

    TypeScript中Getter/Setter用法详解

    getter使我们能够将属性绑定到在访问属性时调用的函数,而setter将属性绑定到在尝试设置属性时调用的函数,下面就跟随小编来看看TypeScript中Getter/Setter的用法吧
    2024-10-10
  • 浏览器调试动态js脚本的方法(图解)

    浏览器调试动态js脚本的方法(图解)

    这篇文章主要介绍了浏览器调试动态js脚本的方法，文中给大家带来两种调试方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01

最新评论