透明度不会变化,别的可以变化,求帮忙看下
透明度不会变化,别的可以变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,ul,li{ margin: 0; padding: 0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border:5px solid black; } ul #li1{ filter:alpha(opacity:30) ; opacity:0.3; } </style> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> </ul> <script> window.onload=function () { // var list=document.getElementsByTagName('li') // for (var i=0;i<list.length;i++){ // list[i].times=null; // list[i].onmouseover=function () { // startMove(this,400); // } // list[i].onmouseout=function () { // startMove(this,200); // } // } var li1=document.getElementById('li1'); var li2=document.getElementById('li2'); // li1.times=null; // li2.times=null; // li3.times=null; li1.onmouseover=function () {startMove(this,100,'opacity')} li1.onmouseout=function () {startMove(this,30,'opacity')} li2.onmouseover=function () {startMove(this,200,'height')} li2.onmouseout=function () {startMove(this,100,'height')} } //var times=null; function startMove(obj,iTarget,sty){ clearInterval(obj.times); obj.times=setInterval(function () { var icur=0; if(sty=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,sty)))*100; } else {icur=parseInt(getStyle(obj,sty))} var speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.times); } else{ if(sty=='opacity'){ odiv.style.filter='alpha(opacity:'+icur+speed+')'; odiv.style.opacity=(icur+speed)/100; } else{obj.style[sty]=icur+speed+'px';} } },15) } function getStyle(obj,sty) { //获取样式 if(obj.currentStyle){ return obj.currentStyle[sty]; //IE下的 } else {return getComputedStyle(obj,false)[sty]}//火狐下的 } </script> </body> </html>