JS垂直无缝转动代码,带转动及时像素

　　JS实现的无缝垂直转动字幕，看一下结果，很是酷吧？绝对是无缝转动，很滑腻，本代码量较少，实现了很好的节制。其它在转动模块的下方带有转动像素的及时表现，只要复制代码即可行使哦，虽然你可以任意修改代码，猛火网不要钱哦！

　　来看实例：

<title>JS垂直无缝转动代码,带转动及时像素　-　Liehuo.net</title> <style> *{padding:0;margin:0;font-size:12px;} #wrap{width:300px;background:#eee;} #wrap li{height:22px;line-height:22px;} </style> <div id="wrap" style="overflow:hidden;height:100px;"> <!-- height值必然要比box1的offsetHeight(亦即box2的offsetTop)要小 --> <ul id="box1"> <li><a href="#" title="猛火网">8层PCB计划,Mushkin推4GB双通道游戏内存 </a></li> <li><a href="#" title="猛火网"><b>傲游</b>3.0 Beta赏识器,<b>Maxthon</b>做专题页宣布 </a></li> <li><a href="#" title="猛火网">Android Market 应用数目打破五万大关 </a></li> <li><a href="#" title="猛火网">下一代MSN等Live组件不再支持Windows XP </a></li> <li><a href="#" title="猛火网">Office 2011 for Mac最新<b>截图</b>画廊浏览 </a></li> <li><a href="#" title="猛火网">Google <b>Chrome</b>插手WOFF开放字体名目 </a></li> <li><a href="#" title="猛火网">SONY Dash 小我私人互联网终端开始出售 </a></li> <li><a href="#" title="猛火网">收集上已呈现Office 2010 RTM破解要领 </a></li> <li><a href="#" title="猛火网">Outlook 2010 Hotmail Connector RTM 下载 </a></li> 安详信息<li><a href="#" title="猛火网">趋势科技收集安详专家2010免费1年[附序列号] </a></li> <li><a href="#" title="猛火网">天下图书日“读吧网”等电子书网站被挂马 </a></li> <li><a href="#" title="猛火网">专家研究发明：IE可晋升<b>Firefox</b>安详 </a></li> <li><a href="#" title="猛火网">伪赛博QQ木马成新后门 <b>金山卫士</b>提醒用户要鉴戒 </a></li> <li><a href="#" title="猛火网">72up,72ub.Com是什么网站?金山网盾出专杀 </a></li> <li><a href="#" title="猛火网">72up.com、72ub.com病毒突袭,网友请勿会见 </a></li> <li><a href="#" title="猛火网">72ub有惊喜病毒传染<b>手机QQ</b>,网友留意防御 </a></li> <li><a href="#" title="猛火网">黑客组织破解DRM,称育碧应更多的存眷游戏 </a></li> <li><a href="#" title="猛火网">McAfee误杀svchost.exe,已颁发声明办理 </a></li> </ul> <ul id="box2"></ul> </div> <!-- 无他，放参考值尔 --> <div id="refer"> </div> <script type="text/javascript"> var speed=50; var $$=function(id){return document.getElementById(id);} $$('box2').innerHTML=box1.innerHTML; function roll(){ if($$('box2').offsetTop-$$('wrap').scrollTop<=0) { //当转动到第二部门的顶部位置时 $$('wrap').scrollTop-=$$('box1').offsetHeight; //重置至第一部门顶部位置,相等于$$('box').scrollTop=0; } else{ $$('wrap').scrollTop++ ; $$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop //无他，参考值尔 } } var start=setInterval(roll,speed); $$('wrap').onmouseover=function() {clearInterval(start)}; $$('wrap').onmouseout=function() {start=setInterval(roll,speed)}; </script> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

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