软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：内容滚动

<!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>欢乐无从，快乐从心！ 
</dd> 
</dl> 
 
</div> 
</body> 
</html>

技术文章快速查找

编辑浪子版表单验证类

国外大牛IE版本检测！现在IE都到9了，IE检测代码

jQuery 1.7.2中getAll方法的疑惑分析

js null,undefined,字符串小结

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建