<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>边框运动</title><style>div{width:100px; height:100px; margin:20px; float:left; background:yellow; border:2px solid green; filter:alpha(opacity=30); opacity:0.3; }</style><script>function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]}else{ return getComputedStyle(obj,false)[name]; } }window.onload=function(){ var aDiv1=document.getElementById('div1'); ; var oTxt=document.getElementById('txt');aDiv1.onmouseover=function(){ startMove(this,'borderWidth',100); }aDiv1.onmouseout=function(){ startMove(this,'borderWidth',30); }/*aDiv1.onmouseover=function(){ startMove(this,'width',400); }aDiv1.onmouseout=function(){ startMove(this,'width',100); }*/ } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=parseInt(getStyle(obj,attr)) if(attr=='opacity'){ cur=parseFloat(getStyle(obj,attr))*100; }else{ cur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-cur)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer);} else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+cur+speed+')'; obj.style.opacity=(cur+speed)/100; var oTxt=document.getElementById('txt'); oTxt.value= obj.style.opacity; }else{ obj.style[attr]=cur+speed+'px'; var oTxt=document.getElementById('txt'); oTxt.value= cur+speed;} } },30) }</script></head><body><input id='txt' type="text" /><div id='div1'>边框运动</div></body></html>
1 回答
stone310
TA贡献361条经验 获得超191个赞
代码在chrome和IE下可以正常执行的，火狐由于不支持borderWidth这么写，要求更严谨的写法：
border-left-width ,border-top-width ,border-right-width , border-bottom-width，
所以先建议你把运动框架改成完美运动框架（就是将attr和iTarget两个参数，变成json模式），具体可找找教程，网上很多，慕课应该也有
然后再写边框运动就写上面4个属性都变化（所有浏览器都能兼容）
以后就记得了，写边框运动比较麻烦点
添加回答
举报
0/150
提交
取消