缓冲代码在firefox上运行正常，但在360浏览器中有时候会无限左移和右移？
来源：3-1 JS缓冲动画
图图眼白
2016-03-26 10:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
#div1{
background:red;
width: 200px;
height:200px;
left:-200px;
position: relative;
}
#share{
position: absolute;
display: block;
left:200px;
width:50px;
height:75px;
top:20px;
background: green;
}
</style>
<script>
window.onload = function(){
var oDiv =document.getElementById('div1');
oDiv.onmousemove = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
var timer = null;
function startMove(iTarget){
clearInterval(timer);
var oDiv =document.getElementById('div1');
var speed = (iTarget-oDiv.offsetLeft)/5;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
timer = setInterval(function(){
if(oDiv.offsetLeft ==iTarget){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft+speed+"px";
}
},30)
}
}
</script>
</head>
<body>
<div id="div1">
<span id ="share">分享</span>
</div>
</body>
</html>在360上实验5次总会有一次会无限漂移，firefox上实验十多次一点问题都没有
写回答
关注
2回答
-
- 二师弟
- 2016-04-04 17:47:13
var speed = (iTarget-oDiv.offsetLeft)/5; speed = speed>0?Math.ceil(speed):Math.floor(speed);
speed的定义这段代码要放到定时器内部函数里去
-
- 图图眼白
- 2016-03-26 10:19:13
firefox上也重现了Orz
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题