完美运动框架，包括有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,{width: 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>
时间： 2024-11-03 21:44:12