为了账号安全,请及时绑定邮箱和手机立即绑定

js动画,边框宽度达不到目标值,运行结果总是比目标值小7.

js动画,边框宽度达不到目标值,运行结果总是比目标值小7.

kx00012kx 2016-08-13 09:30:18
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> *{list-style:none;margin:0px;padding:0px;} ul li{width:200px;   height:100px;   background:yellow;   margin:50px auto;   border:#000000 solid 1px;   filter:alpha(opacity:30);   opacity:0.3;   } </style> <script> window.onload=function(){ var li1=document.getElementById('li1') li1.onmouseover=function(){ startMove(li1,{'width':400,'height':200,opacity:100,borderWidth:50}) } li1.onmouseout=function(){ startMove(li1,{'width':200,'height':100,opacity:30,borderWidth:1}) } } //var alpha=30 function startMove(obj,json,fn){ clearInterval(obj.timer) obj.timer=setInterval(function(){ //var icur=0 var flag=true for(var attr in json){ if(attr=='opacity'){ var icur=Math.round(parseFloat(getStyle(obj,[attr]))*100) } else{ var 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()} } },50) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } else{ return getComputedStyle(obj,false)[attr] } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>当边框的目标宽度大于8时,运行结果总是比目标宽度小7;当边框的目标宽度小于等于8时,即使原始宽度不是1,运行结果也总是回变成1;导致这个bug的原因是什么额,求大神解答?
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 1138 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信