您的位置：首页 > 其它

11,运动基础框架（匀速）

2013-06-20 14:23 337 查看

匀速运动（框架）：给物体不断加速度，用setInterval来循环执行；

用timer来储存setInterval返回的id值；clearInterval(timer);清除定时器，让运动停止。用if else 来判断运动是移动还是停止；

每执行一次事件（点击按钮）要清楚一次定时器，防止定时器叠加使速度不断加快；

<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()" />
<div id="div1">

js代码：

<script>
var timer=null;

function startMove()
{
var oDiv=document.getElementById('div1');

clearInterval(timer);//清除上一次点击时发生的定时器
timer=setInterval(function (){
var speed=1;
//判断是运动还是停止
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>

练习：分享到

鼠标移入移出，改变div的左侧距离（用匀速运动框架）；用当前的左侧距离oDiv.offsetLef与目标点iTarget比较；借以判断速度方向，oDiv.offsetLeft<iTarget则iSpeed为正，反之则为负；

当到达目标点时，关闭定时器，运动停止；

HTML:

<body>
<div id="div1">
<span>分享到</span>
</div>

CSS:right:-20;

<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>

JS:

<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

oDiv.onmouseover=function ()
{
startMove(0);
};
oDiv.onmouseout=function ()
{
startMove(-150);
};
};

var timer=null;

function startMove(iTarget)
{
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function (){
var speed=0;

if(oDiv.offsetLeft>iTarget)//判断速度方向；
{
speed=-10;
}
else
{
speed=10;
}

if(oDiv.offsetLeft==iTarget)//运动或停止；
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>

练习2：图片淡入淡出；

改变图片的透明度：opacity来实现；用运动框架改变opacity;当前的透明度用一个变量储存：Alhpa=30；比较Alpha与iTarget目标值之间大小来确定速度方向。

透明度变化过程：Alpha+=iSpeed;变化的是Alpha,再将该值赋值给oDiv.style.filter:(ie)或者oDiv.style.opacity;

html:

<body>
<div id="div1"></div>
</body>

JS:

<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

oDiv.onmouseover=function ()
{
startMove(100);
};
oDiv.onmouseout=function ()
{
startMove(30);
};
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function (){
var speed=0;

if(alpha<iTarget)
{
speed=10;
}
else
{
speed=-10;
}

if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed;

oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
}, 30);
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航