多物體,不同目標值
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多圖動畫</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>為什么三個物體的目標值都是400呢,怎么可以設置目標值為200,300,400,三個都不一樣
2015-10-25
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>多圖動畫</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>2015-10-25
li[i].onmouseover=function(){
????????????????startmove(this,itarget);
????????????}
在這改變itarget的值，因為你每次使用的都一樣。所以才都是400.
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>多圖動畫</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了