JS实现模拟新浪微博和腾讯微博首页滚动
来源：互联网 发布：造价师工程师网络教育 编辑：程序博客网 时间：2024/05/17 15:39
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>JS实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</title> <style type="text/css"> *{margin:0;padding:0} body{font:12px/1.8 Arial;color:#666;margin:0;height:100%;background:#333} .wrapper{padding:50px} ul,li{margin:0;padding:0;list-style:none} .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} .slider li{padding:20px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%} </style> <script type="text/javascript"> function H$(i) { return document.getElementById(i) } function H$$(c, p) { return p.getElementsByTagName(c) } var slider = function () { function inits(o) { this.id = o.id; this.at = o.auto ? o.auto : 3; this.o = 0; this.pos() } inits.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) } else { var __t = Math.abs(_t) - Math.ceil(Math.abs(_t) * 0.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 inits }(); </script></head><body> <h1 class="tit-h1">JS实现模拟新浪微博大厅和腾讯微博首页滚动效果 www.phpernote.com</h1> <div class="wrapper"> <div class="wp"> <ul id="slider" class="slider"> <li>入山又恐别倾城 世间安得双全 不负如来不负卿 </li> <li>第一最好不相见，如此便可不相恋。 </li> <li>那一天 闭目在经殿香雾</li> <li>你见 或者不见我 我就在那里</li> </ul> </div> </div> <script type="text/javascript">new slider({ id: 'slider' });</script></body></html>
