JS渐闪笔墨转动，来自新浪微博首页

发布时间：2018-08-20 08:40:09 所属栏目：编程来源：站长网

导读：JS渐闪笔墨转动，来自新浪微博首页。将保举的几条微博按必然纪律自行转动，转动时有渐入闪动结果，依次类推，各人先看看结果就大白了，然后在新浪微博首页如故在行使哦，也许我写的代码还不是最佳优化状态，可是我认为这已经不错了。演示： !DOCTYPE ht

　　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=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>猛火学院 www.veryhuo.com 网页殊效</dt> </dl>  <dl > <dt>我记得我爱过（电视剧《泡沫之夏》主题曲）-何润东</dt> </dl>  <dl > <dd>#我最喜好的书#绝对不是言情和<b>校园</b>谈爱情的那种，就是无聊的，只有看那些书的时辰，我也一个字看不进。其余的书还都蛮喜好的，嘿嘿</dd> </dl>  <dl > <dt>等会儿又要飞了，好想死。旁边放把铰剪，其实写不出对象来，随时筹备从天灵盖插下去……</dt> </dl>  <dl > <dt>有人质疑我“发福了，老了，唱不动了”。我早已不把这些话放在心上。</dt> </dl>  <dl > <dt>记录神色，记录糊口点滴，接待走进<b>腾讯微博</b>。</dt> <dd>欢悦无从，快乐从心！</a> </dd> </dl>  </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys