按钮控制div移动方向

最新推荐文章于 2022-01-27 23:31:12 发布

w18789476022

最新推荐文章于 2022-01-27 23:31:12 发布

阅读量738

点赞数 1

分类专栏： JS笔记涉及代码文章标签： js

本文链接：https://blog.csdn.net/w18789476022/article/details/109537761

版权

1.控制一个div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
   
				margin: 0;
				padding: 0;
			}

			#box1 {
   
				width: 6.25rem;
				height: 6.25rem;
				background-color: orangered;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
   
					var btn = document.getElementById("btn");
					var btn02 = document.getElementById("btn02");
					var box1 = document.getElementById("box1");


					//点击按钮后，box1向右移动(left值增大)
					btn.onclick = function(event) {
   
						event = event || window.event;
						move(box1,800,10);

					};
					btn02.onclick = function() {
   
						move(box1, 0, 10);
					};

					var timer;
					/*
					 *尝试创建一个可以简单动画的函数
					 * 参数 obj要执行动画的对象
					 * 		target:执行动画的目标位置
					 * 	   speed：移动的速度
					 */
					function move(obj, target, speed) {
   
						//关闭上一次的计时器，否则每按一次button，每开启一个计时器，此时速度不像设置的那样
						clearInterval(timer);
						var current = parseInt(getStyle(obj, "left"));
						//判断速度的正负值
						if(current>target){
   
							speed=-speed;
						}
						timer = setInterval(

最低0.47元/天解锁文章

w18789476022

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
按钮控制div移动方向

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 { width: 6.25rem; height: 6.25rem; background-col
复制链接

扫一扫

专栏目录