源码 ：
hao_roll = {
id:null,
speed:30,
timer:null,
Num:0,
oLiH:0,
aLiH:0,
mouseOn:false,
json:null,
// 初始化
init:function(obj){
this.json = {};
for(var i in obj) {
this.json[i] = obj[i];
}
this.oNav = document.getElementById(this.json.id);
// alert(this.oNav.parentNode);
var aLi = this.oNav.getElementsByTagName('li');
//设置样式
this.oNav.parentNode.style.position="relative";
this.oNav.style.position='absolute';
this.oNav.style.left='0';
this.oNav.style.top='0';
for(var i=0; i<aLi.length; i++){
aLi[i].style.float = 'left';
}
this.oLiH = aLi[0].offsetHeight;
this.aLiH = this.oLiH*aLi.length*2;
this.oNav.innerHTML+=this.oNav.innerHTML;
// console.log(this.aLiH)
},
// 定时器
Timer:function(){
this.timer = setInterval(function(){
hao_roll.Num--;
// console.log(hao_roll.Num);
if(hao_roll.Num<=(-hao_roll.aLiH/2)){
hao_roll.Num=1;
}
hao_roll.oNav.style.top = hao_roll.Num+'px'
},this.speed);
},
// 事件执行
roll:function(obj){
// console.log(obj);
hao_roll.init(obj);
this.id = this.json.id;
this.speed = this.json.speed;
this.mouseOn = this.json.mouseOn;
this.Timer();
if(this.mouseOn){
hao_roll.oNav.onmouseover = function(){
hao_roll.moseover();
};
hao_roll.oNav.onmouseout = function(){
hao_roll.moseout();
};
}
},
//鼠标移上清除定时器
moseover:function(){
clearInterval(this.timer);
},
//鼠标移开定时器继续运行
moseout:function(){
this.Timer()
}
};
html代码：
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.tab{width: 900px; height: 30px; overflow: hidden; margin: 100px auto;}
.nav{width: 900px; overflow: hidden; }
.nav ul{width:900px; overflow: hidden;}
.nav ul li{width: 900px; height: 30px; background: #000000;text-align: center; color: #FFFFFF; list-style: none ; line-height: 30px; cursor: pointer}
.nav .a{background: #ff0000;}
.nav .b{background: #000000;}
.nav .c{background: #0038c0;}
</style>
</head>
<body>
<div class="tab">
<div class="nav" id="Nav">
<ul>
<li class="a">第一行</li>
<li class="b">第二行</li>
<li class="c">第三行</li>
</ul>
</div>
</div>
<script src="js/hao_roll.js"></script>
<script>
hao_roll.roll({
id:'Nav', //设置ID
speed:30, //设置滚动速度单位毫秒
mouseOn:true //是否打开鼠标移上停止滚动默认是false
});
</script>
</body>
</html>
时间： 2024-07-31 02:18:25