JS单条消息滚动
<!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>
<title>JS+CSS打造一款新闻列表无限滚动代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
*{padding:0; margin:0;}
#roll{ border:1px solid red;height:100px; margin:10px auto; width:600px;margin-left: 800px;
margin-top:100px; 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="#">今日热点</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>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</html>
