公司做个页面效果，文字向上滚动，需要循环，鼠标移上去，清除定时器停止运动，鼠标移除，运动继续。
之前一般在17素材网找类似的效果进行修改，总觉得没意思，自己写一个吧，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
*{ margin: 0; padding: 0;}
ul,li{list-style: none;}
#div1{
position:relative;
width: 100px;
height: 145px;
margin: 100px auto;
border: 1px solid red;
overflow: hidden;
}
#ul{
position:absolute;
left:0;
top:0;
}
#div1 li{
height: 24px;
line-height: 24px;
width: 100px;
text-align: center;
cursor: pointer;
}
#div1 li:hover{
background: green;
}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById(‘div1‘);
var oUl = oDiv.children[0];
var aLi = oUl.children;
timer =null;
oUl.innerHTML += oUl.innerHTML;
var len = aLi.length;
oUl.style.height = aLi[0].offsetHeight * len +‘px‘;
h = oUl.offsetHeight/2;
var top=0;
clearInterval(timer);
var timer =setInterval(next,300);
for(var i=0; i<len;i++){
aLi[i].onmouseover=function(){
clearInterval(timer);
}
aLi[i].onmouseout=function(){
timer =setInterval(next,300);
}
}
function next(){
top += -10;
document.title = top;
//oUl.style.top = (top%h-h)%h + "px"; //向下滚动时top += 10;
oUl.style.top = top%h + "px";
}
};
</script>
</head>
<body>
<div id="div1">
<ul id="ul">
<li style="background:red;">我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
<li>我是li6</li>
</ul>
</div>
</body>
</html>
其实和图片左右无缝滚动的效果一直，没事可以研究下。。。。。。。。。。。。。。
时间： 2024-10-12 07:17:23