为什么使用getStyle（）方法，但是变换后的数值还是不对？
来源：4-3 任意属性值（一）
yaocs
2016-07-01 21:27
如下代码，鼠标移上去改变后的 宽为 391px，于设定参数不符， 鼠标移出正常是200px，请问哪里出错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动--动画</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
width: 200px;
height: 80px;
margin-bottom: 20px;
background-color: #FF0000;
border: 4px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oli = document.getElementsByTagName("li");
for (var i=0; i<oli.length; i++) {
oli[i].timer = null; //多物体运动不能共享一些参数，需提前单独设置为属性
oli[i].onmouseover = function (){
changeW(this,"width",400);
}
oli[i].onmouseout = function (){
changeW(this,"width",200);
}
}
}
//getStyle() 封装
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj,false)[attr];
}
}
//运动函数
function changeW(obj,attr,W) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iattr = parseInt(getStyle(obj,attr));
var speed = (W-iattr)/10;
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if (iattr == W) {
clearInterval(obj.timer);
} else{
obj.style[attr] = iattr + speed + "px";
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
写回答
关注
1回答
-
- yaocs
- 2016-07-01 22:19:05
找到原因了，浏览器被缩放了...
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题