                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫(huà)效果

沒(méi)有出來(lái)動(dòng)畫(huà)

這是我寫(xiě)的代碼：

<style>

*{

? margin:0;

? padding:0;

}

#did{

width:200px;

height:200px;

background:red;

top:0px;

}

</style>

window.onload=function(){

var oDiv=document.getElementById("did");

oDiv.onmouseover=function(){

startMove(400);

}

var timer=null;

function startMove(object){

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(oDiv.offsetWidth>object){

speed=-10;

}

else{

speed=10;

}

if(oDiv.offsetWidth==object){

clearInterval(timer);

}

else{

oDiv.style.width=oDiv.offsetWidth+speed;

}

},30)

}

</script>

qq_耿陽(yáng)陽(yáng)_0

2016-11-16

源自：JS動(dòng)畫(huà)效果 2-1

關(guān)注問(wèn)題我要回答

694

操作

收起

2 回答

Lemon156
2016-11-17

你代碼中兩個(gè)地方有錯(cuò)誤

在startMove函數(shù)中沒(méi)有獲取到id為did的div
在給oDiv.style.width賦值的時(shí)候要加上px,因?yàn)閛Div.style.width是有帶單位的
下面是我改過(guò)來(lái)的代碼

<script?type='text/JavaScript'>
window.onload=function(){
var?oDiv=document.getElementById("did");
oDiv.onmouseover=function(){
startMove(400);
}
}
var?timer=null;
function?startMove(object){
var?oDiv=document.getElementById("did");
clearInterval(timer);
timer=setInterval(function(){
var?speed=0;
if(oDiv.offsetWidth>object){
speed=-10;
}
else{
speed=10;
}
if(oDiv.offsetWidth==object){
clearInterval(timer);
}
else{
oDiv.style.width=oDiv.offsetWidth+speed+'px';
}
},30)
}
</script>