多物體運動
阿新 • • 發佈:2018-12-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin:0; padding:0; } ul,li{ margin:0; padding:0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background:yellow; margin-bottom: 20px; filter:alpha(opacity:30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload=function(){ var li = document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].timer=null; li[i].onmouseover = function(){ startMove(this,400); } li[i].onmouseout = function(){ startMove(this,200); } } } function startMove(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed = (target-obj.offsetWidth)/8;//增加緩衝運動 speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil向上取整,floor向下取整 if(obj.offsetWidth == target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth + speed+'px'; } },30); } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
多物體運動需要對執行函式多加一個引數-物件obj。給每一個要觸發的元素都設定一個定時器,或者初始值(例如透明度的alpha),這樣互不干擾
關於透明度的小知識點: filter: alpha(opacity:30); /*濾鏡,ie用谷歌沒用*/ 功能十分強大,此處語義為不透明度30%,範圍0-100
opacity:0.3; /*不透明度,谷歌用,不支援ie*/ 範圍0-1