<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS多物体动画</title><style type="text/css">{margin: 0;padding: 0;}ul,li{list-style: none;}ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;border: 4px solid #000;filter: alpha(opacity:30);opacity: 0.3;}</style><script type="text/javascript">var li1=document.getElementById('li1'),li2=document.getElementById('li2');li1.onmouseover=function(){//startMove(this,'height',400);startMove(this,'opacity',100);}li1.onmouseout=function(){//startMove(this,'height',100);startMove(this,'opacity',30);}/* li2.onmouseover=function(){startMove(this,'width',400);};li2.onmouseout=function(){startMove(this,'width',200);};*///获取属性值function getStyle(obj,attr){if(obj.currentStyle){//兼容IE浏览器return obj.currentStyle[attr];}else{//兼容firefox浏览器return getComputedStyle(obj,false)[attr];}}//var timer=null;var alpha=30;function startMove(obj,attr,iTarget){//清除定时器clearInterval(obj.timer);//设置定时器obj.timer=setInterval(function(){var icur=0;if (attr=='opacity') {icur=Math.round(parseFloat(getStyle(obj,attr))*100);} else {icur=parseInt(getStyle(obj,attr));}var speed=(iTarget-icur)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(icur==iTarget){clearInterval(obj.timer);}else{if (attr=='opacity') {obj.style.filter='alpha(opacity:'+(icur+speed)+')';obj.style.opacity=(icur+speed)/100;} else {obj.style[attr]=icur+speed+'px';}}},30);}</script></head><body><ul><li id="li1"></li><!-- <li id="li2"></li> --></ul></body></html>
添加回答
举报
0/150
提交
取消