JS运动基础框架

你的名字 2022-08-07 02:49 183阅读 0赞

# 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.οnlοad=function(){
    				var oDiv=document.getElementById("div1");
    				var oBt=document.getElementsByTagName('input')[0];
    				var time=null;
    				oBt.οnclick=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>

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关运动框架总结

运动框架演变过程： 1、startMove(iTarget) //运动框架（只能单个物体运动） 2、startMove(obj,iTarget) //多物体

你的名字/ 2024年02月17日 23:20/ 0 赞/ 8 阅读

相关 js运动技术--完美运动框架

运用JSON传递参数： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淡淡的烟草味﹌/ 2024年02月17日 23:20/ 0 赞/ 81 阅读

相关 js运动技术--缓冲运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

￡神魔★判官ぃ/ 2024年02月17日 23:11/ 0 赞/ 46 阅读

相关 js运动技术

1、“分享栏”： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

一时失言乱红尘/ 2024年02月17日 23:10/ 0 赞/ 52 阅读

相关 JS之运动框架

一、匀速运动框架 1.设置元素为绝对定位，left、top才有效 <style> div1{width:100px;height:200px;b

朴灿烈づ我的快乐病毒、/ 2022年08月22日 00:02/ 0 赞/ 161 阅读

相关 JS运动框架之分享侧边栏动画

JS运动框架之分享侧边栏动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

系统管理员/ 2022年08月07日 03:39/ 0 赞/ 197 阅读

相关 JS运动基础框架

JS运动基础框架 1 注意：在开始运动时关闭已有的定时器 2 注意：把运动和停止隔开 <!DOCTYPE html> <html>

你的名字/ 2022年08月07日 02:49/ 0 赞/ 184 阅读

相关 Javascript运动概念1——缓冲运动、匀速运动、运动框架

概念—— A、运动基础：（1）让div运动起来（2）速度——物体运动的快慢（3）运动中的Bug a、不会停止 b、速度取某些值会无法停止 c、到达位置后再点

以你之姓@/ 2022年07月15日 12:07/ 0 赞/ 223 阅读

相关 JS运动框架-move3.js

/ Created by zhanghaibin on 16/12/5. / //完美运动框架 function getStyle

落日映苍穹つ/ 2022年07月14日 11:18/ 0 赞/ 138 阅读

相关 js运动框架

参照网上写了一个运动框架支持对象的width,height,left,top...，透明度动画效果 // 对一个对象的多个属性实现动画 functio

╰半橙微兮°/ 2021年12月24日 06:55/ 0 赞/ 268 阅读