<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多物体运动和渐变色</title><style type="text/css"> *{margin: 10px;padding: 0px}div{float: left;width: 100px;height: 100px;background: #18F11C;filter: alpha(opacity:30);opacity: 0.3;}</style><script type="text/javascript">window.onload=function() {var Div=document.getElementsByTagName('div');for (var i = 0; i < Div.length; i++) {Div[i].timer=null;Div[i].onmouseover=function(){var This=this; //感觉是加粗部分有问题！startMove(This,'opacity',100,function(){ startMove(This,'width',400);});}Div[i].onmouseout=function(){startMove(This,'width',100,function(){startMove(This,'opacity',30);});}}}function getStyle(obj,arr){if(obj.currentStyle){return obj.currentStyle[arr];}else{return getComputedStyle(obj,false)[arr];}}//var timer=null;var alpha=30;function startMove(obj,arr,iTarget,fn){clearInterval(obj.timer);obj.timer=setInterval(function(){varicon=0;if(arr=='opacity'){icon=Math.round(parseFloat(getStyle(obj,arr))*100);}else{ icon=parseInt(getStyle(obj,arr));}var speed=(iTarget-icon)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(icon==iTarget){clearInterval(obj.timer);if(fn){fn();}}else{if(arr=='opacity'){obj.style.filter='alpha(opacity:)'+icon+speed+')';obj.style.opacity=(speed+icon)/100;}else{ obj.style.arr=icon+speed+'px';}}},30)}</script></head><body> <div></div> <div></div> <div></div> <div></div> <div></div></body></html>
添加回答
举报
0/150
提交
取消