Js仿新浪微博首页内容滚动

更新时间：2010年11月03日 17:56:35 作者：

JavaScript仿新浪微博首页的内容滚动，将推荐的几条微博按一定规律自行滚动，依次类推，大家先看看效果就明白了

然后在新浪微博首页仍然在使用哦，可能我写的代码还不是最佳优化状态，但是我觉得这已经不错了。

<!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>  <div class="col-act"> <div class="colAct-list clear" id="actDbList" >  <dl class="clear" > <dt>-------------------------------------</dt> <dd>---------------------------------------</dd> <dd>---------------------------------------</dd> </dl>  </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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

内容滚动

javascript 网页上跳动的文字
网页上跳动的文字，代码稍复杂，效果挺可爱的，一跳一跳的文字，真逗人！
2009-10-10
Js+CSS 文字渐隐渐现显示
JavaScript文字渐隐渐现显示，更专业的说法叫淡入淡出，最开始用于视频蒙太奇制作及Flash动画上，现在用到文字上也不是什么稀罕事了.
2009-10-10
javascript 模拟Marquee文字向左均匀滚动代码
Marquee是HTML语言里固有的文字滚动标签，虽然用着方便，但是功能上有一些限制，很多时候我们都是通过JavaScript来补充这一功能.
2009-10-10
颜色变换像字符逐字输入的欢迎词
一个炫彩的网页欢迎词，其实就是Javascript文字特效，只不过它是打字与炫彩的结合，在网页的一角放上这效果，给平静的网页增添点动态元素。
2009-10-10
纯CSS 链接悬停提示效果代码
CSS做出漂亮的鼠标悬停提示效果，使用层的绝对定位，不管你的网页窗口如何变化，提示层始终处于理想位置不会改变，兼容性也良好，因些很实用的一个链接提示功能代码。
2009-10-10
JavaScript数组应用可依次读取的公告栏文字
一个JavaScript数组的应用例子，我们将文字存储于数组中，然后用循环依次输出这些文字，像一条一条的公告一样，不过现在都不这么用了，可以学习JS数组，算是一个实例参考。
2009-10-10
javascript 走马灯效果的链接提示
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
2009-10-10
窗体滚动条出现在左侧的实例代码
让浏览器窗口中的滚动条打破常规出现在网页的左侧，记得在藏文的一些网站，经常看到网页滚动条居左，不知为何居左，可能是某些人群的使用习惯吧。
2010-09-09
JS溶解形式的文字切换特效
JavaScript形成溶解过渡形式的文字切换特效，够酷吧，的你平静如水的网页上旋转这么一个文字特效，一定会吸引不少人的注意力，文字内容和颜色以及字号大小看看代码就会知道怎么改了。
2009-11-11
Js文字背景行如流水特效
行如流水的Js文字背景特效，本人比较喜欢的效果，文字的背景像流水线一样，不断的循环变化，很漂亮哦。
2009-10-10