完美运动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50px;
left: 0px;
}
#line{
width: 1px;
height: 500px;
position: absolute;
top: 0;
left: 500px;
background: red;
}
</style>
</head>
<body>
<button id="leftMove">向左移动</button>
<button id="rightMove">向右移动</button>
<button id="opacityMove">改变透明度</button>
<button id="opacityMove1">透明度回到初始值</button>
<button id="widthAndHeightMove">链式运动</button>
<button id="wmMove">完美运动</button>
<div id="box">
</div>
<div id="line"></div>
</body>
</html>
<script src="animate4.0.js"></script>
<script type="text/javascript">
var rightMove = document.getElementById("rightMove");
var leftMove = document.getElementById("leftMove");
var opacityMove = document.getElementById("opacityMove");
var opacityMove1 = document.getElementById("opacityMove1");
var widthAndHeightMove = document.getElementById("widthAndHeightMove");
var wmMove = document.getElementById("wmMove");
var box = document.getElementById("box");
rightMove.onclick = function(){
animate(box,"500","left","fast");
}
leftMove.onclick = function(){
animate(box,"0","left","fast");
}
opacityMove.onclick = function(){
animate(box,"10","opacity","fast");
}
opacityMove1.onclick = function(){
animate(box,"100","opacity","fast");
}
widthAndHeightMove.onclick = function(){
animate(box,"500","width","fast",function(){
//alert("动画执行完毕")
animate(box,"500","height","fast",function(){
animate(box,"10","opacity","fast",function(){
//alert("动画执行完毕")
animate(box,"100","opacity","fast");
});
});
});
}
wmMove.onclick = function(){
var obj = {
width:200,
height:200,
left:500,
top:200
}
animate(box,obj);
}
function animate(ele,obj,callBack,speedTime){//callBack = function(){alert("动画执行完毕")}
//把timer私有化，在当前运动的元素下创建一timer属性
clearInterval(ele.timer);
if(speedTime == undefined){
speedTime = 20;
}else if(speedTime == "slow"){
speedTime = 50;
}else if(speedTime == "quickly"){
speedTime = 30;
}else if(speedTime == "fast"){
speedTime = 10;
}
ele.timer = setInterval(function(){
//var flag = true;//用来控件所有样式动画是否全部执行完毕。true表示都执行完毕 了。
var flag = true;
for(var attr in obj){
var current = 0;
if(attr == "opacity"){//当要运动的是元素的透明度的时候。
//获取透明度的初始值。透明度是不需要使用parseInt();
current = getStyle(ele,attr)*100;
console.log(current);
}else{
// psrseInt对当前值取整了
current = parseInt(getStyle(ele,attr));
}
var speed = (obj[attr] - current)/10;
//当前speed是一个小数时，让小数作向上或向下取整的操作。
//为了解决达不到目标值的问题。
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// console.log(getStyle(ele,attr),obj[attr] - current,"目标值："+obj[attr],"运动后的当前值："+current,"步长："+speed);
if(Math.abs(obj[attr] - current) > speed){ //没到目标值。
flag = false;
}
if(attr == "opacity"){//当要运动的是元素的透明度的时候。
//透明度不需要单位。
ele.style[attr] = (current + speed)/100;
}else if(attr=="zIndex"){//zIndex直接设置目标值
ele.style[attr]=obj[attr];
}else{
ele.style[attr] = current + speed + "px";
}
}
if(flag){//表示所有样式的动画都执行完毕了
clearInterval(ele.timer);
//链式运动的处理
//callBack = function(){alert("动画执行完毕")}
if(callBack){
callBack();
}
}
},speedTime);
}
//跨浏览器兼容ie8及以下获取元素计算后样式值。
function getStyle(obj,attr){
//如果在这里parseint()，获取透明度的时候，会把小数去掉，得到的永远是0；
//return window.getComputedStyle ? parseInt(window.getComputedStyle(obj,null)[attr]) : parseInt(obj.currentStyle[attr]);
return window.getComputedStyle ? window.getComputedStyle(obj,null)[attr] : obj.currentStyle[attr];
}
</script>
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
