匀速运动之停止条件
来源:互联网 发布:吴师自通 知乎 编辑:程序博客网 时间:2024/06/07 07:23
***************************匀速运动 1****************************************
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position: absolute;left:0;}
span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
var oDiv=document.getElementsByTagName("div")[0];
domove(oDiv,600);
var timer;
var Speed;
function domove(obj,target)
{
Speed=10;
obj.onclick=function(){
timer=setInterval(function(){
obj.style.left=obj.offsetLeft+Speed+"px";
if(obj.offsetLeft==target){clearInterval(timer);}
////再次点击的时候还是会继续运动的,这里的==是有问题的
},30)
}
}
</script>
***************************匀速运动 2****************************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position: absolute;left:0;}
span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
</style>
</head>
<body>
<input type="button" value="buttons" onclick="startMove()"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
var timer=null; //定时器需放在函数外面,避免每次调用都开启一个
function startMove()
{
var oDiv=document.getElementsByTagName("div")[0];
clearInterval(timer);//移出所有的定时器,解决了每次点击都开启一个定时器的问题
timer=setInterval(function(){
var Speed=10;
if(oDiv.offsetLeft>=600){clearInterval(timer);} //已经到达,匀速运动if里面的条件必须为>=
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
},30)
}
</script>
***************************匀速运动 3****************************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position: absolute;left:0;}
span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
</style>
</head>
<body>
<input type="button" value="buttons" onclick="startMove(600)"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
var timer=null; //定时器需放在函数外面,避免每次调用都开启一个
function startMove(itarget)
{
var oDiv=document.getElementsByTagName("div")[0];
clearInterval(timer);//移出所有的定时器,解决了每次点击都开启一个定时器的问题
timer=setInterval(function(){
var Speed=10;
if((itarget-oDiv.offsetLeft)<Speed)//如果不足够再次运行一次定时器的距离的时候 就停止,当然>=也是一个停止条件,常见的有两种停止条件
{
oDiv.offsetLeft=itarget;
clearInterval(timer);
}
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
},30)
}
</script>
- 匀速运动之停止条件
- Javascript 匀速运动停止条件——逐行分析代码,让你轻松了解运动的原理
- JavaScript 运动之匀速运动
- JavaScript 动画之匀速运动
- javascript动画之匀速运动
- 匀速运动
- 匀速运动
- 匀速运动
- [js运动动画]运动之匀速运动框架
- 【COCOS2DX-BOX2D游戏开发之四】 Box2D匀速运动
- JS匀速运动
- js匀速运动
- 弹性运动+摩擦力+运动停止条件
- C读写字符串函数的停止条件
- js动画之匀速运动、缓冲运动、弹性运动、碰撞运动、属性变化动画
- Java之线程停止
- Java之线程停止
- Java之线程停止
- android端调用jni接口和c++交互时产生的编码问题
- 解决内部存储空间紧张,不加载桌面壁纸,桌面壁纸显示
- IRMA Incident Response Malware Analysis
- 第八周项目五——定期存款利息计算器
- 取出一个文件夹下的所有文件
- 匀速运动之停止条件
- python中复制列表的正确方法
- 高效率编辑器 VIM-操作篇,非常适合 VIM 新手
- oracle如何查询和停止正在运行的job
- Eclipse项目上有红色感叹号的解决方法
- perl: warning: Setting locale failed
- ANDROID内存优化(大汇总——中)
- RabbitMQ
- 设置hadoop的client端的jvm参数