制作获取属性的方法的时候总是效果不对？
weibo_张张张张张大仙呀_03578611
2016-08-09 00:21
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!-- <script src="getStyle.js"></script>-->
<script>
function startMove(obj, attr, iTarget, fn) {//获取样式的方法（项目，属性，目标值）
//clearInterval(obj.timer);
obj.timer = setInterval(function () {
var icur = 0;//现在属性的值
if (attr == 'opacity') {
var icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round 四舍五入的函数方法。
}
else {
var icur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur == iTarget) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style.width = icur + speed + 'px';
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
<style>
#div1 {
width:200px;
height:200px;
position: relative;
background:yellow;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function () {
startMove(oDiv, 'width', 400, function () {
startMove(oDiv, 'height', 400);
});
}
oDiv.onmouseout = function () {
startMove(oDiv, 'width', 200, function () {
startMove(oDiv,'height',200);
});
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
我这个js中写的 想呈现的效果是 鼠标移进的时候长度先到400px 然后再高度到400px；鼠标移出的时候长度恢复到200px 然后高度再到200px；为什么浏览器中出现的效果是长度变到400px之后就回来了 然后长度就开始乱跳 但是高度从来就不变 ？请懂得人指点一下 谢谢！
1回答
-
- 雪神仙
- 2016-08-09 22:26:06
1.obj.style.width = icur + speed + 'px';//这里只能获取宽度属性
改成：obj.style[attr]=icur + speed + 'px';
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 4
回答 1