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

时间:2020-05-12 人气:0

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

<!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> 
<div> 
 
<dl class="clear" > 
<dt>-------------------------------------<https://img.qb5200.com/download-x/dt> 
<dd>---------------------------------------<https://img.qb5200.com/download-x/dd> 
<dd>---------------------------------------<https://img.qb5200.com/download-x/dd> 
<https://img.qb5200.com/download-x/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> 
 
<dl > 
<dt>我记得我爱过（电视剧《泡沫之夏》主题曲）-何润东<https://img.qb5200.com/download-x/dt> 
<https://img.qb5200.com/download-x/dl> 
 
<dl > 
<dd>#我最喜欢的书#绝对不是言情和校园谈恋爱的那种，就是无聊的，只有看那些书的时候，我也一个字看不进。其它的书还都蛮喜欢的，嘿嘿<https://img.qb5200.com/download-x/dd> 
<https://img.qb5200.com/download-x/dl> 
 
<dl > 
<dt>等会儿又要飞了，好想死。旁边放把剪刀，实在写不出东西来，随时准备从天灵盖插下去……<https://img.qb5200.com/download-x/dt> 
<https://img.qb5200.com/download-x/dl> 
 
<dl > 
<dt>有人质疑我"发福了，老了，唱不动了"。我早已不把这些话放在心上。<https://img.qb5200.com/download-x/dt> 
<https://img.qb5200.com/download-x/dl> 
 
<dl > 
<dt>记录心情，记录生活点滴，欢迎走进腾讯微博。<https://img.qb5200.com/download-x/dt> 
<dd>欢乐无从，快乐从心！</a> 
<https://img.qb5200.com/download-x/dd> 
<https://img.qb5200.com/download-x/dl> 
 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容