（36）JS运动之使物体向右运动

基本思路：样式要是绝对定位，不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击button而开启多个定时器，导致物体的速度加快等原因，其次要控制好物体的运动和停止。用if-else控制逻辑控制。

<!DOCTYPE HTML>
<!---->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{width:200px;height:200px;background:red;position:absolute;//不加绝对定位，就跑不起来top:50px;left:0px;
}</style><script>
var timer=null;
function startMove(){var oDiv=document.getElementById('div1');   clearInterval(timer);//保证仅仅有一个定时器在工作，不会由于连续点击多次按钮而开启多个定时器，从而导致速度变快timer=setInterval(function (){var speed=1;if(oDiv.offsetLeft>=300)//大于300时让物体停在那里，不一直运动下去{ clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30)}
</script>
</head>
<body><input id="btn1" type="button" value="開始运动" οnclick="startMove()"/><div id="div1"></div></body>
</html>

效果图：

（36）JS运动之使物体向右运动相关推荐

javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
Unity利用Curvy Spline插件生成曲线，并使物体沿生成的曲线运动
插件下载: 网络资源 Assets Store 我用的是Curvy Splines - 7.1.4.导入后场景中会出现如下界面. 创建曲线 https://blog.csdn.net/cordova/ ...
MIT：大脑如何跟踪运动中的物体？
来源:脑健康联盟抓住一个弹起的球,或者用球拍击球,这两种行动都需要合理地估算触球时间.一直以来,神经科学家都相信,大脑是通过计算物体的运动速度来完成这些动作的. 然而,麻省理工学院的一项新研究表明, ...
Unity之使物体透明化和还原
模型同事给的fbx文件都会有材质球,这个就是物体原始的材质球(Origin Material),用于"还原":使物体透明化也需要一个材质球(Transparent Material ...
js运动小球碰壁反弹
js运动小球碰壁反弹 1.触碰窗口壁沿反弹,同时改变颜色 <!DOCTYPE html> <html lang="en"><head><m ...
js运动（一）—— sidebar(分享到)
1.前言在一些网页中,经常可以看到边框上,有一个"分享到"的小标签,鼠标进入后,划出一个小框,上面是微信.QQ等选项.这个效果可以使用js运动来实现. 尽管在现实开发中,运动可能 ...

（36）JS运动之使物体向右运动

（36）JS运动之使物体向右运动相关推荐

最新文章

热门文章