<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運動框架完美運動框架
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章