js实现li列表无缝滚动

2021-09-03 网页编程网 网页编程网

<html>
<head>
<meta charset="utf-8" />
<title>JS实现Li列表的无缝垂直文字滚动代码</title>
<style>
*{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>超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li>
<li><a>CSS制作斜角上有背景图片的Div层</a></li>
<li><a href="">Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li>
<li><a href="">DIV始终固定在网页右下角位置的CSS实现方法</a></li>
</ol>

<div id="bug"></div>
</body>
<script>
(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>

阅读原文

阅读 3341

123 显示电脑版