运动
位移 top left …折叠 width height淡入淡出 opacity
时间
setTimeoutsetInterval 一般来说定时器都记得要清除 让每一次动画都是一个全新的动画.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document
</title>
<style type="text/css">
* { margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li { list-style: none;}
body { font-family: "Microsoft yahei";}
#box {width: 100px; height: 100px; background: lightgreen; opacity: 1; filter: alpha(opacity=100);position: absolute; top: 0; left: 0;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var boxDom = document.getElementById("box");
boxDom.onmouseenter = function(){
move(this,{'width':500,'height':500,'opacity':30},function(){
move(this,{'width':50,'height':50,'opacity':100},function(){
this.style.background = "lightblue";
})
});
};
function move(dom,json,callBack){
clearInterval(dom.timer);
dom.timer = setInterval(function(){
var mark = true;
for(var attr in json){
var cur = undefined;
if(attr == "opacity"){
cur = getStyle(dom,attr)*100;
}else{
cur = parseInt(getStyle(dom,attr)) || 0;
}
var target = json[attr];
var speed = (target-cur)*.2;
speed = speed>0?Math.ceil((target-cur)*.2):Math.floor((target-cur)*.2);
if(cur != target){
if(attr == "opacity"){
dom.style[attr] = (cur + speed)/100;
dom.style.filter = "alpha(opacity="+(cur+speed)+")";
}else{
dom.style[attr] = cur + speed + "px";
}
mark = false;
}
};
if(mark){
clearInterval(dom.timer);
callBack&&callBack.call(dom);
};
},1000/30);
};
function getStyle(dom,attr){
return dom.currentStyle?dom.currentStyle[attr]:getComputedStyle(dom)[attr];
};
</script>
</body>
</html>
收缩==>move.js
function move(dom,json,callBack){
clearInterval(dom.timer);
dom.timer = setInterval(
function(){
var mark =
true;
for(
var attr
in json){
var cur =
null;
if(attr ==
"opacity"){
cur = getStyle(dom,attr)*
100;
}
else{
cur =
parseInt(getStyle(dom,attr)) ||
0;
}
var target = json[attr];
var speed = (target - cur)*
.2;
speed = speed>
0?
Math.ceil((target - cur)*
.2):
Math.floor((target - cur)*
.2);
if(cur != target){
if(attr ==
"opacity"){
dom.style[attr] = (cur + speed)/
100;
dom.style.filter =
"alpha(opacity="+(cur+speed)+
")";
}
else{
dom.style[attr] = cur + speed +
'px';
}
mark =
false;
}
};
if(mark){
clearInterval(dom.timer);
if(callBack)callBack.call(dom);
}
},
1000/
30);
};
function getStyle(dom,attr){
return dom.currentStyle?dom.currentStyle[attr]:getComputedStyle(dom)[attr];
};
转载请注明原文地址: https://ju.6miu.com/read-40252.html
