为了账号安全,请及时绑定邮箱和手机立即绑定

如果浏览器不支持小数像素,var speed = (iTarget - oDiv.offsetLeft)/20;当speed等于20以下的时候,oDiv.style.left = oDiv.offsetLeft + speed +'px';这里的speed就小于1了。浏览器应该在20px左右的时候就停止了,为什么是在10px左右的时候停止呢

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

body,div,span{

margin: 0;

padding: 0;

}

   #div1{

    width: 200px;

    height: 200px;

    left: -200px;

    background-color: red;

    position: relative;

   }

#div1 span{

width: 20px;

height: 50px;

background-color: blue;

position: absolute;

top:75px;

left: 200px;

}

</style>

<script type="text/javascript">

window.onload = function(){

var oDiv = document.getElementById('div1');

oDiv.onmouseover = function () {

startMove(0);

}

oDiv.onmouseout = function () {

startMove(-200);

}

}


var timer = null;

function startMove(iTarget) {

clearInterval(timer);

var oDiv = document.getElementById('div1');

timer = setInterval(function () {

var speed = (iTarget - oDiv.offsetLeft)/20;

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>

如果浏览器不支持小数像素,var speed = (iTarget - oDiv.offsetLeft)/20;当speed等于20以下的时候,oDiv.style.left = oDiv.offsetLeft + speed +'px';这里的speed就小于1了。浏览器应该在20px左右的时候就停止了,为什么是在10px左右的时候停止呢

正在回答

2 回答

我猜是因为像素有小数时会四舍五入,所以speed小于1大于0.5时还会动,10px左右的时候停止是刚好speed在0.5的分界线

1 回复 有任何疑惑可以回复我~
#1

慕斯7571954 提问者

非常感谢!
2016-09-20 回复 有任何疑惑可以回复我~

看教程

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

如果浏览器不支持小数像素,var speed = (iTarget - oDiv.offsetLeft)/20;当speed等于20以下的时候,oDiv.style.left = oDiv.offsetLeft + speed +'px';这里的speed就小于1了。浏览器应该在20px左右的时候就停止了,为什么是在10px左右的时候停止呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信