<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多运动透明</title> <style type="text/css"> ul,li{list-style: none;} ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; } </style> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> <li></li> </ul> <script type="text/javascript"> window.onload =function () { // var ali =document.getElementsByTagName('li') // for (var i = 0; i < ali.length; i++) { // ali[i].timer =null; // ali[i].timer =null; // ali[i].onmouseover = function () { // startMove(this,400); // } // ali[i].onmouseout =function () { // startMove(this,200) // } // }; var li1=document.getElementById('li1') var li2=document.getElementById('li2') li1.onmouseover =function () { startMove(this,'opacity',100) } li1.onmouseout =function () { startMove(this,'opacity',30) } // li2.onmouseover =function () { // startMove(this,'width',400) // } // li2.onmouseout =function () { // startMove(this,'width',100) // } } function getSytle (obj,attr) { if(obj.currentStyle){return obj.currentStyle[attr];} else{return getComputedStyle(obj,false)[attr];} } // var timer=null; var alpha=30; function startMove (obj,attr,iTarget) { clearInterval(obj.timer); obj.timer =setInterval(function () { var icur =0; if (attr=='opacity') {icur=parseFloat(getSytle(obj.attr))*100} else{var icur=parseInt(getSytle(obj,attr))}; var speed = (iTarget-icur)/8; speed =speed>0? Math.ceil(speed):Math.floor(speed) if (obj.icur==iTarget) {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}; } },30) } </script> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
李晓健