<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
textarea {
position: fixed;
right: 0;
top: 50px;
}
div {
margin-top: 10px;
width: 100px;
height: 30px;
background: red;
border: 1px solid green;
cursor: pointer;
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
</head>
<body style="height:3000px;">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script src="test.js"></script>
<script>
window.onload = function() {
var oDiv1 = document.getElementsByTagName('div');
for (var i = 0; i < oDiv1.length; i++) {
// 给每个元素对象设置一个定时器
// 用来结局定时器公用的问题
oDiv1[i].timer = null;
oDiv1[i].onclick = function() {
startMove2(this, {
"width": 300,
"height": 100,
"opacity": 100
}, function() {
// alert();
});
};
}
alert(getStyle(oDiv1[0], 'opacity'));
}
</script>
</body>
/**
* [getStyle 获取计算出来的样式]
* @param {[type]} obj [元素对象]
* @param {[type]} attr [属性名]
* @return {[type]} [对应属性名的值]
*/
function getStyle(obj, attr) {
/*兼容IE678*/
if (obj.currentStyle) {
// IE
return obj.currentStyle[attr];
} else {
// 其他
return getComputedStyle(obj, false)[attr];
}
}
/**
* [startMove 完美欲动框架]
* @param {[Ojbect]} obj [description]
* @param {[Ojbect json]} jsonObj [json对象]
* @return {[type]} [没有返回值]
*/
function startMove2(obj, jsonObj, fn) {
clearInterval(obj.timer);
var flag = true;
obj.timer = setInterval(function() {
for (var attr in jsonObj) {
// 获取当前值
if (attr == 'opacity') {
// 因为opacity是小数,所以用 parseFloat
// 用parseFloat之后会出现,52.00000000000001的情况,所以要加上Math.round
// 这里很奇怪 parseInt(parseFloat(getStyle(obj, attr) * 100));在谷歌里面不兼容
// 其他浏览器都得到了很好的兼容
var curr = Math.round(parseFloat(getStyle(obj, attr) * 100));
} else {
var curr = parseInt(getStyle(obj, attr));
};
// 求速度
var speed = (jsonObj[attr] - curr) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 检测停止
if (jsonObj[attr] != curr) {
flag = false;
}
if (attr == 'opacity') {
obj.style.opacity = (curr + speed) / 100;
obj.style.filter = 'filter(alpha=' + (curr + speed) + ')';
} else {
obj.style[attr] = curr + speed + 'px';
};
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
console.log(attr + ": " + curr);
}
}, 30);
}
js运动框架完美运动框架
最新推荐文章于 2020-10-14 22:22:42 发布