<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0} div{ width:300px; height:300px; background:#F33; filter: alpha(opacity:30); margin:10px; float:left; opacity:0.3; } </style> <script> window.onload=function() { var oDiv=document.getElementsByTagName('div');//获得元素 for(var i=0;i<oDiv.length;i++) { oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function() { startMove(this,100); } oDiv[i].onmouseout=function() { startMove(this,30); } /*oDiv.onmouseover=function()//移入事件 { startMove(100); } oDiv.onmouseout=function()//移出事件 { startMove(30); }*/ } } /*var alpha=30; /*var timer=null;*/ function startMove(obj,iTarget){//定义函数 clearInterval(obj.timer); //清空事件以免重复触发 /* var oDiv=document.getElementById('div1');*///函数内获取元素 obj.timer=setInterval(function(){ //定义定时器 var speed=0; //定义速度属性 if(obj.alpha>iTarget) //判断当前的left值与目标值的关系 { speed=-10; //大于目标值速度则是负值 } else { speed=10; //否则速度则是正值 } if(obj.alpha==iTarget) //等于目标值则停止运动 { clearInterval(obj.timer) //清空定时器 } else{ obj.alpha+=speed; //运动速度 obj.style.filter='alpha( opacity:'+obj.alpha+')' ;//IE透明度赋值 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>
相关分类