<!DOCTYPE html><html><head><meta charset="UTF-8"><title>完美框架</title><style type="text/css">body{margin: 0;padding: 0;} ul,li{ list-style:none;}ul li{width: 100px;height:100px;background:yellow;margin-bottom:20px; filter:alpha(opacity:30); opacity:0.3;}</style><script src="startMove.js"></script><script>window.onload=function(){ var oLis=document.getElementsByTagName("li"); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover=function(){ startMove(this,{width:300,height:300,opacity:100}); } oLis[i].onmouseout=function(){ startMove(this,{width:100,height:100,opacity:30}); } }}</script></head><body><ul> <li></li> <li></li> <li></li></ul></body></html>引入的Js代码：function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{return getComputedStyle(obj,false)[attr]; }}function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var icur=0; var flag=true; if(attr=="opacity"){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]) {flag=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(flag){ clearInterval(obj.timer); if(fn){fn(); } } } },30)}
添加回答
举报
0/150
提交
取消