完美运动框架，包括有style和opacity的样式实现
//以下是运动框架的内容
function getStyle(obj, name)
{
if(obj.currentStyle) //仅IE
{
return obj.currentStyle[name];
}
else //兼容FF浏览器
{
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj,json,fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要执行的运动
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop = true; //假设：所有值都已经到了
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)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]) //如果有没有到达的值
bStop = 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(bStop){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
//alert("a");
}
}, 30);
}
完整实现代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完美运动框架</title> <style> #div1{width:200px;height:200px; background:red; filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(){ startMove(oDiv,{ 300,height: 300,opacity:100} ); } } //以下是运动框架的内容 function getStyle(obj, name) { if(obj.currentStyle) //仅IE { return obj.currentStyle[name]; } else //兼容FF浏览器 { return getComputedStyle(obj, false)[name]; } } function startMove(obj,json,fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要执行的运动 { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop = true; //假设：所有值都已经到了 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)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) //如果有没有到达的值 bStop = 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(bStop){ clearInterval(obj.timer); if(fnEnd) fnEnd(); //alert("a"); } }, 30); } </script> </head> <body> <input id ="btn1" type="button" value="运动"/> <div id="div1"></div> </body> </html>
多物体运动框架js代码：
首先还是做了style兼容处理，接着是startMove函数
//以下是运动框架的内容
function getStyle(obj, name)
{
if(obj.currentStyle) //仅IE
{
return obj.currentStyle[name];
}
else //兼容FF浏览器
{
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget,fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要执行的运动
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(iTarget-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
完整代码实现如下：
<!DOCTYPE HTML> <!--链式运动框架：运动分阶段进行，当运动停止的时候，执行下一个运动--> <html> <head> <meta charset="utf-8"> <title></title> <style> div{width:100px;height:50px;background:red;filter:alpha(opacity:30);opacity:0.3;margin:10px;} </style> <script src="多物体move.js"></script> <script> window.onload=function () { //var oDiv=document.getElementsByTagName('div');//先获取div元素 var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ //var oDiv[i].onmouseover=function () { var that = this; startMove(that,'width',300,function(){//先是宽变300 startMove(that,'height',300,function(){//当宽变300的时候，即运动结束时候开启另一个运动，使其高变为300 startMove(that,'opacity',100);//使透明度变成100，原来是30 }); }); }; oDiv[i].onmouseout=function ()//当鼠标移出的时候，跟移进的时候效果相反即可。 { var that = this; startMove(that,'width',100,function(){ startMove(that,'height',100,function(){ startMove(that,'opacity',30); }); }); }; } }; </script> </head> <body> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> </body> </html>