慕课网javascript动画特效 多透明度 源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多物体运动</title> <style>
div{ width:200px; height:100px; background:yellow; margin-bottom: 20px; filter:alpha(opacity:0.3); opacity:0.3; } </style> <script> window.onload=function(){ var ali=document.getElementsByTagName(‘div‘); for(var i=0;i<ali.length;i++){ ali[i].alpha=30; ali[i].timer=null ali[i].onmouseover=function(){ startMove(this,100); } ali[i].onmouseout=function(){ startMove(this,30); } } } // var timer=null; // var alpha=30; // ali[i].alpha=30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; }if(obj.alpha==iTarget){ clearInterval(obj.timer); } else{ obj.alpha+=speed; obj.style.filter=‘alpha(opacity:‘+obj.alpha+‘)‘; obj.style.opacity=obj.alpha/100; } },30) } </script></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div></body></html>慕课网地址http://www.imooc.com/video/2880
时间： 2024-08-24 22:21:56