链式运动
一、Html布局
<body>
<div id="test"></div>
</body>
二、Css样式
<style>
body{
margin:0;
padding: 0;
}
#test{
width:200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
filter:alpha(opacity:30); /*针对 IE8 以及更早的版本*/
opacity:0.3;
border: 4px solid blue;
/*添加一个宽度为4px的边框*/
}
</style>
三、Js部分
startMove = function(obj,attr,iTarget,fn){
//链式运动需要添加一个回调函数作为参数
clearInterval(obj.timer);
//开启定时器前先关闭所有定时器
obj.timer = setInterval(function(){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
//如果是opacity则应用parseFloat 之后×100是为了方便兼容alpha
//parseFloat取到的是多位小数 所以用Math.round四舍五入
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget -icur)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
//缓冲运动 speed>0向上取整 speed<0向下取整
if(icur == iTarget){
clearInterval(obj.timer);
if(fn){
fn(); //上一个动作完成时判断是否需要执行下一个动作
}
}else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity: '+(icur+speed)+')';
//针对 IE8 以及更早的版本
obj.style.opacity = (icur+speed)/100;
//针对FF Chrome
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30)
}
window.onload = function(){
var myDiv = document.getElementById("test");
myDiv.onmouseover = function(){
//链式调用
startMove(this,'width',400,function(){
startMove(myDiv,'height',400,function(){
startMove(myDiv,'opacity',100);
});
});
}
myDiv.onmouseout = function(){
//注意动作执行顺序
startMove(this,'opacity',30,function(){
startMove(myDiv,'height',100,function(){
startMove(myDiv,'width',200);
});
});
}
}
getStyle = function(obj,attr){
if(obj.currentStyle){
//currentStyle IE浏览器
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
//getComputedStyle 第二个参数为垃圾参数 写什么都可以 习惯false FF Chrome浏览器
}
同时运动
使用Json修改运动框架
startMove = function(obj,json,fn){
var flag = true;//假设所有运动都达到目标值的flag
clearInterval(obj.timer);
//开启定时器前先关闭所有定时器
obj.timer = setInterval(function(){
for(var attr in json){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
//如果是opacity则应用parseFloat 之后×100是为了方便兼容alpha
//parseFloat取到的是多位小数 所以用Math.round四舍五入
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] -icur)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
//缓冲运动 speed>0向上取整 speed<0向下取整
if(icur != json[attr]){
//如果不是所有的运动达到目标值
flag = false;
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity: '+(icur+speed)+')';
//针对 IE8 以及更早的版本
obj.style.opacity = (icur+speed)/100;
//针对FF Chrome
}else{
obj.style[attr] = icur + speed + "px";
}
}else{
//如果全部运动达到目标值，关闭定时器
clearInterval(obj.timer);
if(fn){
fn(); //判断是否需要执行回调函数
}
}
}
},30)
}
var myDiv = document.getElementById("test");
myDiv.onmouseover = function(){
startMove(this,{width:400,height:400,opacity:100},function(){
alert("变换完成～");
});
}
myDiv.onmouseout = function(){
startMove(this,{opacity:30,height:100,width:200});
}
