兩種運動同事進行怎么實現？
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>多物體運動</title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
}
ul,li{
list-style:?none;
}
ul?li{
width:?200px;
height:?100px;
background:?red;
margin-bottom:?20px;
filter:alpha(opacity:30);
opacity:?0.3;
}
</style>
<script>
window.onload?=?function(){
var?aLi?=?document.getElementsByTagName('li');
for(var?i?=?0;i?<?aLi.length;i++){
aLi[i].timer?=?null;
aLi[i].alpha?=?30;
aLi[i].onmouseover?=?function(){
startMove(this,400);
changeColor(this,100);
}
aLi[i].onmouseout?=?function(){
startMove(this,200);
changeColor(this,30);
}
}
}
function?startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?speed?=?(iTarget-obj.offsetWidth)/10;
speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget?==?obj.offsetWidth){
clearInterval(obj.timer);
}
else{
obj.style.width?=?obj.offsetWidth+speed+'px';
}
},30)
}
function?changeColor(obj,iTarget){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?speed?=?(iTarget?-?obj.alpha)/10;
speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
if?(iTarget?==?obj.alpha)?{
clearInterval(obj.timer);
}
else{
obj.alpha+=speed;
obj.style.filter?=?'alpha(opacity:'+obj.alpha+')';
obj.style.opacity?=?obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>如果要實現offseWidth和opacity同時變化要怎樣實現？上述方法為什么不能實現？請大神指教
2015-10-19
是因為你定時器同名了，把第一個定時器的名稱換成與第二個不一樣就好了。
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"/> <title>多物體運動</title> <style?type="text/css"> *{ ????margin:?0; ????padding:?0;??????? } ul,li{ ????list-style:?none; } ul?li{ ????width:?200px; ????height:?100px; ????background:?red; ????margin-bottom:?20px; ????filter:alpha(opacity:30); ????opacity:?0.3; } </style> <script> window.onload?=?function(){ ????var?aLi?=?document.getElementsByTagName('li'); ????for(var?i?=?0;i?<?aLi.length;i++){ ????????aLi[i].timer?=?null; ????????aLi[i].alpha?=?30; ????????aLi[i].onmouseover?=?function(){ ????????????startMove(this,400); ????????????changeColor(this,100); ????????} ????????aLi[i].onmouseout?=?function(){ ????????????startMove(this,200); ????????????changeColor(this,30); ????????} ????} } function?startMove(obj,iTarget){ ????clearInterval(obj.timerSpeed); ????obj.timerSpeed?=?setInterval(function(){ ????????var?speed?=?(iTarget-obj.offsetWidth)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if(iTarget?==?obj.offsetWidth){ ????????????clearInterval(obj.timerSpeed); ????????} ????????else{ ????????????obj.style.width?=?obj.offsetWidth+speed+'px'; ????????} ????},30) } function?changeColor(obj,iTarget){ ????clearInterval(obj.timer); ????obj.timer?=?setInterval(function(){ ????????var?speed?=?(iTarget?-?obj.alpha)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if?(iTarget?==?obj.alpha)?{ ????????????clearInterval(obj.timer); ????????} ????????else{ ????????????obj.alpha+=speed; ????????????obj.style.filter?=?'alpha(opacity:'+obj.alpha+')'; ????????????obj.style.opacity?=?obj.alpha/100; ????????} ????},30) } </script> </head> <body> <ul> ????<li></li> ????<li></li> ????<li></li> </ul> </body> </html>2015-10-20
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"/> <title>多物體運動</title> <style?type="text/css"> *{ ????margin:?0; ????padding:?0;??????? } ul,li{ ????list-style:?none; } ul?li{ ????width:?200px; ????height:?100px; ????background:?red; ????margin-bottom:?20px; ????filter:alpha(opacity:30); ????opacity:?0.3; } </style> <script> window.onload?=?function(){ ????var?aLi?=?document.getElementsByTagName('li'); ????for(var?i?=?0;i?<?aLi.length;i++){ ????????aLi[i].alpha?=?30; ????????aLi[i].onmouseover?=?function(){ ????????????startMove(this,'width',400); ????????????startMove(this,'opacity',100); ????????} ????????aLi[i].onmouseout?=?function(){ ????????????startMove(this,'width',200); ????????????startMove(this,'opacity',30); ????????} ????} } function?startMove(obj,attr,iTarget){ ????clearInterval(obj.timer); ????obj.timer?=?setInterval(function(){ ????????var?icur?=?0; ????????if(attr?==?'opacity'){ ????????????icur?=?Math.round(parseFloat(getStyle(obj,attr))*100); ????????} ????????else{ ????????????icur?=?parseInt(getStyle(obj,attr)); ????????} ????????var?speed?=?(iTarget-icur)/8; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if(iTarget?==?icur){ ????????????clearInterval(obj.timer); ????????} ????????else{ ????????????if(attr?==?'opacity'){ ????????????????obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')'; ????????????????obj.style.opacity?=?(icur+speed)/100; ????????????} ????????????else{ ????????????????obj.style[attr]?=?icur+speed+'px';?? ????????????} ????????} ????},30) } function?getStyle(obj,attr){ ????if(obj.currentStyle){ ????????return?obj.currentStyle[attr]; ????} ????else{ ????????return?getComputedStyle(obj,false)[attr]; ????} } </script> </head> <body> <ul> ????<li></li> ????<li></li> ????<li></li> </ul> </body> </html>你好。接上面的問題，如果把屬性封裝之后，width和opacity調用同一函數的話，定時器不同名問題該怎么解決？謝謝！
2015-10-20
Thanks！感謝！