时间:2021-05-26
本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下:
这里需要注意:
1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开
复制代码 代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left:0;
top:60px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBt=document.getElementsByTagName('input')[0];
var time=null;
oBt.onclick=function(){
clearInterval(time);//这里首先要关闭一个定时器,这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug
time=setInterval(function(){
var speed=7;
if(oDiv.offsetLeft<=600)
oDiv.style.left=oDiv.offsetLeft+speed+'px';
else{
clearInterval(time);
}
},30);
}
}
</script>
</head>
<body>
<input type="button" value="开始运动" />
<div id="div1"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在这篇文章打造通用的匀速运动框架(实例讲解)中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右)。缓冲
本文实例讲述了javascript运动框架用法。分享给大家供大家参考,具体如下:该运动框架可以实现多物体任意值运动运行效果截图如下:例子:运动框架#div1{w
javascript缓冲运动框架的实现框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架。实例代码:/***Createdbywangon201
在这篇文章里,我将把JS的运动由简如深的进行分析:运动基础主要步骤为:清除定时器,保证运动过程中只有一个定时器开启定时器开始运动,同时加入判断以便在需要时停止运
本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:*{margin:0px;padding:0px;