                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

下面的代碼為什么不能實現(xiàn)鼠標(biāo)移入移出div1的width在200px到600px之間變化？

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>運動框架</title>
<style type="text/css">
?*{ margin: 0; padding: 0;}
??? #div1{? width: 200px; height: 100px; background-color: #ff0000;}
</style>
<script type="text/javascript">
window.onload = function(){
?oDiv = document.getElementById('div1');
?oDiv.onmouseover = function(){
??startMove(600);
?}
?oDiv.onmouseout = function(){
??startMove(200);
?}
}
function getStyle(obj,attr){
?if(obj.currentStyle){
??return obj.currentStyle[attr];
?}else{
??return getComputedStyle(obj,false)[attr];
?}
}
var timer = null;
function startMove(iTarget){
?clearInterval(timer);
?var oDiv = document.getElementById('div1');
?var div_width = parseInt(getStyle(oDiv,'width'));
?timer = setInterval(function(){
??var speed = 0;?
??if(div_width > iTarget){
???speed = -10;
??}else if(div_width <iTarget){
???speed = 10;
??}
??if(div_width == iTarget){
???clearInterval(timer);
??}else{
???oDiv.style.width = div_width + speed + 'px';
??}
?},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

Metotaste

2016-02-22

源自：JS動畫效果 3-1

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

521

操作

收起

2 回答

Metotaste 提問者
2016-02-22

解決方案：

需要把下面兩行代碼移動到timer=setInterval()這個方法里的函數(shù)的函數(shù)體里。

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

?var div_width = parseInt(getStyle(oDiv,'width'));

最終有效的代碼是這樣的：

<!DOCTYPE?html>
<head>
<meta?charset="UTF-8">
<title>運動框架</title>
<style?type="text/css">
?*{?margin:?0;?padding:?0;}
????#div1{??width:?200px;?height:?100px;?background-color:?#ff0000;}
</style>
<script?type="text/javascript">
window.onload?=?function(){
?oDiv?=?document.getElementById('div1');
?oDiv.onmouseover?=?function(){
??startMove(600);
?}
?oDiv.onmouseout?=?function(){
??startMove(200);
?}
}
function?getStyle(obj,attr){
?if(obj.currentStyle){
??return?obj.currentStyle[attr];
?}else{
??return?getComputedStyle(obj,false)[attr];
?}
}
var?timer?=?null;
function?startMove(iTarget){
?clearInterval(timer);
?timer?=?setInterval(function(){
??var?speed?=?0;?
??var?oDiv?=?document.getElementById('div1');???????//這行代碼發(fā)生了位置上的移動
??var?div_width?=?parseInt(getStyle(oDiv,'width'));?//這行代碼也發(fā)生了位置上的移動
??if(div_width?>?iTarget){
???speed?=?-10;
??}else?if(div_width?<iTarget){
???speed?=?10;
??}
??if(div_width?==?iTarget){
???clearInterval(timer);
??}else{
???oDiv.style.width?=?div_width?+?speed?+?'px';
??}
?},30)
}
</script>
</head>
<body>
<div?id="div1"></div>
</body>
</html>