<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css"> div { width: 200px; height: 200px; background: red; opacity: 0.3; filter:alpha(opacity:30); float:left; margin-left:20px; } </style><script type="text/javascript">window.onload=function(){ var oDiv=document.getElementsByTagName("div"); for(var i=0;i<oDiv.length;i++){ var oDiv[i].timer=null; oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } }}var alpha=30;function startMove(obj,b){ clearInterval(obj.timer)obj.timer=setInterval(function(){ var a=0; if(alpha>b){ a=-10; } else { a=10; } if(alpha == b){ clearInterval(obj.timer); } else { alpha+=a; obj.style.filter='alpha(opacity:'+alpha+')'; obj.style.opacity=alpha/100; } },30);}</script></head><body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div></body></html>
添加回答
举报
0/150
提交
取消