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

多物體,不同目標(biāo)值

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多圖動(dòng)畫</title>
????<style?type="text/css">
????*{margin:?0;
????????padding:?0;}
????ul,li{list-style:?none;}
????li{width:?100px;
???????height:?100px;
????????background-color:?red;
????????margin-bottom:?50px;}
????</style>
????<script?type="text/javascript">
????window.onload=function??()?{
????var?li=document.getElementsByTagName('li');
????var?itarget=200;
????????for?(var?i?=?0;?i?<?li.length;?i++)?{

????????????li[i].timer=null;
????????????
????????????li[i].onmouseover=function(){
????????????????startmove(this,itarget);
????????????}
????????????li[i].onmouseout=function(){
????????????????startmove(this,100);
????????????}
????????itarget+=100;
????????}

}
????function?startmove?(obj,itarget)?{
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
????????if?(itarget==obj.offsetWidth)?{
????????????clearInterval(obj.timer);
????????}?else{
????????????obj.style.width=obj.offsetWidth+obj.speed+'px';
????????}
????},30)
????
}


????</script>
</head>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>

為什么三個(gè)物體的目標(biāo)值都是400呢,怎么可以設(shè)置目標(biāo)值為200,300,400,三個(gè)都不一樣

周末00

2015-10-25

源自：JS動(dòng)畫效果 4-1

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

708

操作

收起

2 回答

Y_du 回答被采納 +3 積分
2015-10-25

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多圖動(dòng)畫</title>
????<style?type="text/css">
????*{margin:?0;
????????padding:?0;}
????ul,li{list-style:?none;}
????li{width:?100px;
???????height:?100px;
????????background-color:?red;
????????margin-bottom:?50px;}
????</style>
????<script?type="text/javascript">
????window.onload=function??()?{
????var?itarget?=200;
????var?li=document.getElementsByTagName('li');
????????for?(var?i?=?0;?i?<?li.length;?i++)?{
??
????????????li[i].timer=null;
????????????li[i].index?=?i?;
??????????????
????????????li[i].onmouseover=function(){
????????????????if(this.index?==?0)?{?//這里的this.index就是li[i].index?=?i?;的賦值。
????????????????????startmove(this,?"200");
????????????????}?else?if(this.index?==?1){
????????????????????startmove(this,?"300");
????????????????}?else?{
????????????????????startmove(this,?"400");
????????????????}
????????????}
????????????li[i].onmouseout=function(){
????????????????startmove(this,100);
????????????}
????????itarget+=100;
????????}
??
}
????function?startmove?(obj,itarget)?{
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
????????if?(itarget==obj.offsetWidth)?{
????????????clearInterval(obj.timer);
????????}?else{
????????????obj.style.width=obj.offsetWidth+obj.speed+'px';
????????}
????},30)
??????
}
??
??
????</script>
</head>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

周末00 提問者

非常感謝!我這菜鳥實(shí)在是想不出來呀!

2015-10-25 回復(fù) 有任何疑惑可以回復(fù)我~

Y_du
2015-10-25

li[i].onmouseover=function(){

????????????????startmove(this,itarget);

????????????}

在這改變itarget的值，因?yàn)槟忝看问褂玫亩家粯?。所以才都?00.

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多圖動(dòng)畫</title>
????<style?type="text/css">
????*{margin:?0;
????????padding:?0;}
????ul,li{list-style:?none;}
????li{width:?100px;
???????height:?100px;
????????background-color:?red;
????????margin-bottom:?50px;}
????</style>
????<script?type="text/javascript">
????window.onload=function??()?{
????var?li=document.getElementsByTagName('li');
????var?itarget=200;
????????for?(var?i?=?0;?i?<?li.length;?i++)?{
?
????????????li[i].timer=null;
?????????????
????????????li[i].onmouseover=function(){
????????????????startmove(this,itarget);
????????????????
????????????????itarget?=?itarget?+?100?;
????????????}
????????????li[i].onmouseout=function(){
????????????????startmove(this,100);
????????????}
????????itarget+=100;
????????}
?
}
????function?startmove?(obj,itarget)?{
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
????????if?(itarget==obj.offsetWidth)?{
????????????clearInterval(obj.timer);
????????}?else{
????????????obj.style.width=obj.offsetWidth+obj.speed+'px';
????????}
????},30)
?????
}
?
?
????</script>
</head>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>

這樣寫就可以每次都加100了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

周末00 提問者

效果不一樣呀,你試試,我的效果是目標(biāo)分別是200,300,400.按照順序來的,你的不安順序,而且鼠標(biāo)每次在不同圖片上滑動(dòng)都會(huì)增加100的.

2015-10-25 回復(fù) 有任何疑惑可以回復(fù)我~

#2

周末00 提問者

滑動(dòng)第一幅目標(biāo)200,第二幅300,第三幅400.而且每次隨意滑動(dòng)都是這些效果

2015-10-25 回復(fù) 有任何疑惑可以回復(fù)我~

#3