-
JavaScript仿新浪微博首页的内容滚动，将推荐的几条微博按一定规律自行滚动，依次类推，大家先看看效果就明白了，然后在新浪微博首页仍然在使用哦，可能我写的代码还不是最佳优化状态，但是我觉得这已经不错了。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
-
<html xmlns="">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<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>
阅读(290) | 评论(0) | 转发(0) |
