js 微博滚动效果

来源：互联网发布：动态qos 知乎编辑：程序博客网时间：2024/06/06 13:10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>仿新浪微博首页内容滚动</title><style type="text/css">body{background:#efc;}</style></head><body><!-- col-act --><div class="col-act"><div class="colAct-list clear" id="actDbList" ><!-- turn --><dl class="clear" ><dt>-------------------------------------</dt><dd>---------------------------------------</dd><dd>---------------------------------------</dd></dl><!-- turn end --></div></div><script type="text/javascript">/*--------------新鲜事滚动----------------*/var _num=_n=0,_autohidden,_arrObj,_oHeight;function flilter(elem,i,t){var o=document.getElementById("actDbList");if(!o) return false;var elem=o.getElementsByTagName("dl")[0];if (elem.movement) {clearTimeout(elem.movement);}if (!_n===0) _n = parseInt(elem['style'][!-[1,]?'filter':'opacity']);if(_n>=i){return true;}if (_n < i) {var dist = Math.ceil((i - _n)/10);_n = _n + dist;}if (_n > i) {var dist = Math.ceil((i - _n)/10);_n = _n - dist;}elem['style'][!-[1,]?'filter':'opacity']=!-[1,]?'alpha(opacity='+_n+')':_n/100;var repeat = "flilter('"+elem+"',"+i+","+t+")";elem.movement = setTimeout(repeat,t);}function moveElement(elem,final_y,interval) {var o=document.getElementById("actDbList");if(!o) return false;var elem=o.getElementsByTagName("dl")[0];if (elem.movement) {clearTimeout(elem.movement);}if (!elem.style.height) {elem.style.height = "0";}var ypos = parseInt(elem.style.height);if (ypos == final_y) {flilter(o.getElementsByTagName("dl")[0],100,40);return true;}if (ypos < final_y) {var dist = Math.ceil((final_y - ypos)/10);ypos = ypos + dist;}if (ypos > final_y) {var dist = Math.ceil((ypos - final_y)/10);ypos = ypos - dist;}elem.style.height = ypos + "px";var repeat = "moveElement('"+elem+"',"+final_y+","+interval+")";elem.movement = setTimeout(repeat,interval);}function step(obj){var _arrO=document.getElementById("DB");if(!_arrO) return false;var _arr=_arrO.getElementsByTagName("dl");if (_autohidden) {clearInterval(_autohidden);}_n=0;_arrObj=_arr[_num];_max=_arr.length;var o=document.getElementById(obj);var newNode= document.createElement("dl");o.insertBefore(newNode,o.getElementsByTagName("dl")[0]);var s=o.getElementsByTagName("dl")[0];s.style.cssText="height:0;opacity:0;filter:Alpha(opacity=0);overflow:hidden";s.style.className="clear";s.innerHTML=_arrObj.innerHTML;_oHeight=_arrObj.offsetHeight;moveElement(s,_oHeight,10);var lastNode=o.getElementsByTagName("dl")[(o.getElementsByTagName("dl").length-1)];var reLastNode=o.removeChild(lastNode);_num++;if(_num>=_max){_num=0;}stopMove("actDbList");_autohidden = setTimeout(function(){step(obj);},5000);}function stopMove(o){var o=document.getElementById(o);if(!o) return false;o.onmouseover=function(){if (_autohidden) {clearTimeout(_autohidden);}}o.onmouseout=function(){_autohidden = setTimeout(function(){step("actDbList");},5000);}}/*--------------新鲜事滚动结束----------------*/_autohidden = setInterval(function(){step("actDbList");},1000);stopMove("actDbList");</script><div class="" id="DB"><!-- --><dl ><dt>我记得我爱过（电视剧《泡沫之夏》主题曲）-何润东</dt></dl><!-- --><dl ><dd>#我最喜欢的书#绝对不是言情和校园谈恋爱的那种，就是无聊的，只有看那些书的时候，我也一个字看不进。其它的书还都蛮喜欢的，嘿嘿</dd></dl><!-- --><dl ><dt>等会儿又要飞了，好想死。旁边放把剪刀，实在写不出东西来，随时准备从天灵盖插下去……</dt></dl><!-- --><dl ><dt>有人质疑我"发福了，老了，唱不动了"。我早已不把这些话放在心上。</dt></dl><!-- --><dl ><dt>记录心情，记录生活点滴，欢迎走进腾讯微博。</dt><dd>欢乐无从，快乐从心！</a></dd></dl><!-- --></div></body></html>