<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>緩衝運動</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.3;
filter: alpha(opacity:30);
margin:100px auto;
}
input {
width: 80px;
height: 30px;
margin-left: 48%;
}
</style>
</head>
<body>
<input id="btn1" type="button" name="運動" value="運動" />
<div id="div1"></div>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
obtn.onclick = function(){
startMove(oDiv,{width:200,height:300,opacity:100},function(){
startMove(oDiv,{width:100,height:100});
});
}
}
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function getClass(Oparent,sClass){
var objs = Oparent.getElementsByTagName('*');
var aresult = [];
for(var i = 0;i<objs.length;i++){
if (objs[i].className == sClass) {
aresult.push(objs[i]);
}
}
return aresult;
}
function startMove(obj,json,fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var stop = true; //假設json所有值都到達
for(var attr in json){
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj,attr)*100));
}else{
cur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur != json[attr]) {
stop = false;
}
if (attr == 'opacity') {
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr] = cur+speed+'px';
}
}
// 循環結束後 判斷關閉計時器
if (stop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd();
}
}
},30);
}
</script>
</body>
</html>js緩衝運動
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章