<!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)}
Js完美框架案例中,不設(shè)置鼠標移出事件時,鼠標重復(fù)經(jīng)過物體,物體會不停變大。代碼有什么問題嗎?
我背后有個胖子
2016-10-26 20:43:58