<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>緩沖1</title>
????<style?type="text/css">
????????#div1{height:?200px;
??????????width:?200px;
??????????background:?blue;
??????????position:?relative;
??????????left:?-200px;
??????????}
????????#div1?span{???position:?absolute;
????????????height:?50px;
????????????width:?15px;
????????????left:?200px;
????????????top:?75px;
????????????background-color:?red;
????????????}
????????*{margin:?0;padding:?0;}
????</style>
????<script?type="text/javascript">
????window.onload=function?()?{
????????var?div1=document.getElementById('div1');
????????????div1.onmouseover=function(){
????????????????startmove(0);
????????????}
????????????div1.onmouseout=function(){
????????????????startmove(-200);
????????????}
????}
????var?timer=null;
????function?startmove?(itarget)?{
????????clearInterval(timer);
????????timer=setInterval(function(){
????????????var?speed=(itarget-div1.offsetLeft)/20;//speed賦值后,下邊接著判斷
????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????if?(itarget==div1.offsetLeft)?{
????????????????????clearInterval(timer);
????????????}?else{
????????????????div1.style.left=div1.offsetLeft+speed+'px';
????????????};
????????},30)
????}
????</script>
</head>
<body>
????<div?id="div1">
????????<span>分享</span>
????</div>
</body>
</html><!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>緩沖2</title>
????<style?type="text/css">
????????#div1{height:?200px;
??????????width:?200px;
??????????background:?blue;
??????????position:?relative;
??????????left:?-200px;
??????????}
????????#div1?span{???position:?absolute;
????????????height:?50px;
????????????width:?15px;
????????????left:?200px;
????????????top:?75px;
????????????background-color:?red;
????????????}
????????*{margin:?0;padding:?0;}
????</style>
????<script?type="text/javascript">
????window.onload=function?()?{
????????var?div1=document.getElementById('div1');
????????????div1.onmouseover=function(){
????????????????startmove(0);
????????????}
????????????div1.onmouseout=function(){
????????????????startmove(-200);
????????????}
????}
????var?timer=null;
????function?startmove?(itarget)?{
????????clearInterval(timer);
????????timer=setInterval(function(){//這里speed直接賦值并且判斷
????????????var?speed=speed>0?Math.ceil((itarget-div1.offsetLeft)/20):Math.floor((itarget-div1.offsetLeft)/20);
????????????if?(itarget==div1.offsetLeft)?{
????????????????????clearInterval(timer);
????????????}?else{
????????????????div1.style.left=div1.offsetLeft+speed+'px';
????????????};
????????},30)
????}
????</script>
</head>
<body>
????<div?id="div1">
????????<span>分享</span>
????</div>
</body>
</html>兩種speed的賦值方式,造成兩種結果:第一段代碼向右移動后的left值正常,能達到0;第二段代碼向右移動后的left值是-19px.
left值不一樣
周末00
2015-10-26 11:49:07
