3.多物体运动框架
回顾一下上两节的要点,主要讲到了运动框架,十分常见也十分重要。是不是运动很神奇。那么怎么才能让多个物体运动呢?---我们这一节就学习下这个多物体运动框架。
首先先看个小例子:小div变宽变窄的效果;
<style>
#div1 {width:100px; height:50px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function ()
{
var oDiv=document.getElementById('div1');
oDiv.οnmοuseοver=function ()
{
startMove(300);
}
oDiv.οnmοuseοut=function ()
{
startMove(100);
}
}
var timer=null;function startMove(iTarget)
{
var oDiv=document.getElementById('div1'); //容易忘写的地方
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=(iTarget-oDiv.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oDiv.offsetWidth==iTarget)//注意是双等号哦;
{
clearInterval(timer);
}
else
{
oDiv.style.width=oDiv.offsetWidth+iSpeed+'px';
}
}, 30)
}
</script>
</head><body>
<div id="div1"></div>
</body>
</html>
思考:如果有多个div让他们运动该怎么办呢?
<style>
div {width:100px; height:50px; background:red; margin-top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null; //重点:思考下这里是为什么要这样子写?
aDiv[i].οnmοuseοver=function ()
{
startMove(this, 300);
}
aDiv[i].οnmοuseοut=function ()
{
startMove(this, 100);
}
}
}function startMove(obj, iTarget) //obj,哪一个对象或者物体
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iSpeed=(iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+iSpeed+'px';
}
}, 30)
}
</script>
</head><body>
<div></div>
<div></div>
<div></div>
</body>
</html>
总结: 1:多个物体同时运动
--例子:多个DIV,鼠标移入变宽【单个定时器存在问题,所以我们每个DIV一个计时器】
2:多物体运动框架
--定时器作为物体的属性。
--参数传递:物体,目标值。
--例子:多个div淡入淡出。--所以的东西都不能公用。-属性与运动对象绑定:速度,其他属性值(如透明度等)
【思考】既然我们可以给对象添加计时器的属性aDiv[i].timer=null;那么能不能给对象添加其他的属性呢?
看下面的例子,给对象添加alpha属性。
<style>
div {width:100px; height:100px; background:red; margin:10px; filter:alpha(opacity:30); opacity:0.3;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].alpha=30;
aDiv[i].οnmοuseοver=function ()
{
startMove(this, 100);
}
aDiv[i].οnmοuseοut=function ()
{
startMove(this, 30);
}
}
}
//var alpha=30;function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iSpeed=(iTarget-obj.alpha)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.alpha==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.alpha+=iSpeed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';//容易出现错误的地方
obj.style.opacity=obj.alpha/100;
}
}, 30);
}</script>
</head><body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
总结:多物体运动的某个属性最好不要共用,因为迟早会出现毛病。