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>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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