<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world!</title> <style type="text/css"> #oli { width: 200px; height: 200px; background-color: blue; border: 5px solid red; list-style: none; } </style> <script src="./js/script.js"></script> <script type="text/javascript"> window.onload = function() { var oli = document.getElementById('oli'); oli.onmouseover = function(){ startMove(oli,{"height":250,"opacity":50}); } } </script> </head> <body> <ul> <li id="oli"></li> </ul> </body> </html>
以上是HTML部分
下面是JavaScript代码
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var all = true;//假设全部执行成功 for(var attr in json){ var icur = 0; if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); }else{ icur = parseInt(getStyle(obj,attr)); } var speed = (json[attr] - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ all = false; } //判断是否为透明度 if(attr == "opacity"){ obj.style.filter='alpha(opacity='+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr] = icur + speed + "px"; } //检测停止 if(all){ clearInterval(obj.timer); if(fn){ fn(); } } } },30); } //解决IE兼容 function getStyle(obj,attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }
透明度在IE7、8当中测试时没有变化,自己找了很长时间没有找到原因,兼容代码应该是对的,那么应该是判断透明度那段JS出了问题吧,求解,感谢~
stone310
路人丶丨
相关分类