偶尔出现鼠标快速移开的时候就会滚动的很快,不知道是浏览器的问题还是bug,求解?
偶尔出现鼠标快速移开的时候就会滚动的很快,不知道是浏览器的问题还是bug,求解?
偶尔出现鼠标快速移开的时候就会滚动的很快,不知道是浏览器的问题还是bug,求解?
2016-12-28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>滚动测试</title>
<style>
li{
list-style: none;
}
#g1,#g2{
width: 450px;
height: 200px;
overflow: hidden;
border: 1px solid #CCCCCC;
}
#g1 ul,#g2 ul{
display: block;
margin: 0;
width: 430px;
padding-left: 10px;
}
#g1 li,#g2 li{
height: 40px;
border-bottom: 1px dotted #ccc;
line-height: 35px;
}
#g1 span,#g2 span{
color: #ff5203;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>文字无缝滚动</h1>
<div id="g1">
<ul id="con1">
<li>1、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>2、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>3、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>4、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>5、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>6、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
</ul>
<ul id="con2"></ul>
</div>
<script>
var con=document.getElementById('g1');
var con1=document.getElementById('con1');
var con2= document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(con.scrollTop >= con1.offsetHeight){
con.scrollTop = 0;
}else{
con.scrollTop++;
}
}
var time=50;
myScroll=setInterval('scrollUp()',time);
con.onmouseover = function(){
clearInterval(myScroll);
}
con.onmouseout = function(){
myScroll = setInterval("scrollUp()",time);
}
</script>
<h1>文字间歇性滚动</h1>
<div id="g2">
<ul >
<li>1、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>2、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>3、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>4、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>5、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
<li>6、滚动的内容滚动的内容滚动的内容<span>2016-12-27</span></li>
</ul>
<script>
var are=document.getElementById('g2');
var iLiHeight=41;
are.innerHTML+=are.innerHTML;
are.scrollTop=0;
var speed=50;
var delay=2000;
var time;
function starMove(){
time = setInterval('scrollUp2()',speed);
are.scrollTop++;
}
function scrollUp2(){
if(are.scrollTop % iLiHeight == 0 ){
clearInterval(time);
setTimeout(starMove,delay);
}else{
are.scrollTop++;
if(are.scrollTop>= are.scrollHeight/2){
are.scrollTop=0;
}
}
}
setTimeout(starMove,delay);
</script>
</div>
</body>
</html>举报