DIV中Li列表标题无缝向上滚动
作者：admin 时间:2020-01-16 阅读数：220人
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无限滚动代码 站长学院www.zzarea.com</title> <style type="text/css"> *{padding:0; margin:0;} #roll{ border:1px solid red;height:100px; margin:10px auto; width:350px; overflow:hidden;list-style:none;} #roll li{height:30px; padding-left:10px;line-height:30px; border-bottom:1px solid #ddd;} a{font-size:12px; text-decoration:none; font-family:'宋体';} </style> </head> <body> <ol id="roll"> <li><a href="#">站长学院今日热点</a></li> <li><a href="#">www.zzarea.com今日热点</a></li> <li><a href="#">站长论坛今日热点</a></li> <li><a href="#">今日热点</a></li> <li><a href="#">今日热点</a></li> <li><a href="#">今日热点</a></li> <li><a href="#">今日热点</a></li> </ol> <div id="bug"></div> </body> <script type="text/javascript"> (function(A){ function _ROLL(obj){ this.ele = document.getElementById(obj); this.interval = false; this.currentNode = 0; this.passNode = 0; this.speed = 100; this.childs = _childs(this.ele); this.childHeight = parseInt(_style(this.childs[0])['height']); addEvent(this.ele,'mouseover',function(){ window._loveYR.pause(); }); addEvent(this.ele,'mouseout',function(){ window._loveYR.start(_loveYR.speed); }); } function _style(obj){ return obj.currentStyle || document.defaultView.getComputedStyle(obj,null); } function _childs(obj){ var childs = []; for(var i=0;i<obj.childNodes.length;i++){ var _this = obj.childNodes[i]; if(_this.nodeType===1){ childs.push(_this); } } return childs; } function addEvent(elem,evt,func){ if(-[1,]){ elem.addEventListener(evt,func,false); }else{ elem.attachEvent('on'+evt,func); }; } function innerest(elem){ var c = elem; while(c.childNodes.item(0).nodeType==1){ c = c.childNodes.item(0); } return c; } _ROLL.prototype = { start:function(s){ var _this = this; _this.speed = s || 100; _this.interval = setInterval(function(){ _this.ele.scrollTop += 1; _this.passNode++; if(_this.passNode%_this.childHeight==0){ var o = _this.childs[_this.currentNode] || _this.childs[0]; _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0; _this.passNode = 0; _this.ele.scrollTop = 0; _this.ele.appendChild(o); } },_this.speed); }, pause:function(){ var _this = this; clearInterval(_this.interval); } } A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;} })(window); marqueen('roll').start(100/*速度默认100*/); </script> </html>此代码修改自一款Table列表，修改后先在完全使用DIV+CSS实现LI列表的无缝向上滚动，代码已经优化，适用于所有的浏览器IE FF GG都无错误
声明
源码下载不顺利，比如源码在百度网盘的有时会被无故取消等，请联系QQ：46667551
本站大部分下载资源收集于网络，但除特别说明之外，基本全部亲自测试可用！
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
原文链接：https://www.love0312.com/1072.html，转载请注明出处
上一篇:pre 英文字母自动换行
