多物体运动框架
多个物体同时运动
例子：多个div，鼠标移入变宽
单个定时器，存在问题
每个div一个定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 100px;
height: 50px;
background: red;
margin: 10px;
}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;
aDiv[i].onmouseover=function()
{
startMove(this,400)
};
aDiv[i].onmouseover=function()
{
startMove(this,100)
};
}
}
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth/6);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
例子：多个Div淡入淡出
所有东西不能公用
属性与运动对象绑定：速度、其他属性（如透明度等）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 200px;
height: 200px;
background: red;
float: left;
margin: 20px;
filter: alpha(opacity(30));
opacity: 0.3;
}
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].alpha=30;
aDiv[i].onmouseover=function()
{
startMove(this,100);
};
aDiv[i].onmouseout=function()
{
startMove(this,30);
};
}
}
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opcity=obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>任意值运动框架
offset属性bug
有边框的div变宽
用currentStyle代替offset
fucntion getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
原有运动框架的问题
只能让某个值运动起来
如果想让其他值动起来，要修改程序
扩展的运动框架
运动属性作为参数
封装opacity
小数的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
margin: 20px;
float: left;
background: yellow;
border: 10px solid black;
filter: alpha(opacity(30));
opacity: 0.3;
}
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function()
{
startMove(this,'opacity',100);
};
oDiv1.onmouseout=function()
{
startMove(this,'opacity',30);
};
};
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr=='opacity')
{
cur=Math.round((getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.fillter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>仿flash图片展示
效果思路
两边的按钮——淡入淡出
大图下拉——层级、高度变化
下方的li——多物体淡入淡出
下方的ui——位置计算
左右按钮
淡入淡出
鼠标移到按钮上，按钮会消失
层级问题
按钮和遮罩上得加上事件