js的运动与拖拽
1.小球的运动原理
第一步——设置DOM结构
<button>动起来</button> <div> </div>
第二步——设置样式
div {
width: 50px;
height: 50px;
background: lightblue;
padding: 10px;
border: 2px solid red;
margin: 20px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 10px;
}第三步——获取结点
var btn = document.querySelector('button');
var ball = document.querySelector('div');第四步——设置点击事件
btn.onclick = function () {第五步——在点击事件中设置一个定时器，在定时器中改变div的属性从而实现其运动（定时器函数 setInterval()用于间歇行某一函数）
timer = setInterval(function () {
ball.style.left = ball.offsetLeft + 5 + 'px';
}，1000);第六步——添加条件判断，并在不满足条件的情况下清除定时器
clearInterval(timer);
timer = setInterval(function () {
if (ball.offsetLeft < 1000) {
ball.style.left = ball.offsetLeft + 5 + 'px';
} else {
clearInterval(timer);
}
}, 100);
}全部代码：
实例
<!DOCTYPE html>
<style>
div {
width: 50px;
height: 50px;
background: lightblue;
padding: 10px;
border: 2px solid red;
margin: 20px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 10px;
}
</style>
<html>
<head>
<meta charset="utf-8" />
<title>js中的元素运动原理</title>
</head>
<body>
<button>动起来</button>
<div>
</div>
<script>
var btn = document.querySelector('button');
var ball = document.querySelector('div');
//offsetWidth(盒子的可视宽度)offsetWidth = width + padding +border
//当前盒子的可视宽度: 50 + 10*2 + 2*2 = 74 (数值不是字符串)
//offsetLeft(盒子相对定位父级的左边定位相对位置)：left + margin-left
// 经过分析,只需要改变offsetLeft就可以使这个小球向右动起来
// 小球的margin-left不会改变,只要不断的改变left就可以
// 需要使用到定时器函数 setInterval()用于间歇执行某一函数
var timer = null;
btn.onclick = function () {
// console.log(timer);
clearInterval(timer);
timer = setInterval(function () {
//clearInterval(timer);
if (ball.offsetLeft < 1000) {
ball.style.left = ball.offsetLeft + 5 + 'px';
} else {
clearInterval(timer);
}
}, 100);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.小球的拖拽原理
第一步——设置DOM结构
<div id="ball"></div>
第二步——添加样式
#ball {
width: 50px;
height: 50px;
background-color: lightpink;
border-radius: 50%;
box-shadow: 2px 2px 1px #888;
position: absolute;
}第三步——获取所有节点
var ball = document.getElementById('ball'); 第四步——为小球设置鼠标按下事件，通过按下事件得出现在鼠标与小球的相对位置
ball.onmousedown = function (event) {
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;第五步——在按下事件中为整个HTML文档（document对象）设置鼠标移动事件，并得出鼠标的坐标，将giant坐标减去相对位置的x，y值，得到此时小球应该在的坐标。
document.onmousemove = function (event) {
ball.style.left = event.clientX - x + 'px';
//console.log(ball.style.left);
ball.style.top = event.clientY - y + 'px';
}第六步——再按下事件中设置鼠标放开事件，在其中清空移动事件的值，让小球在鼠标放开后不再跟随鼠标
document.onmouseup = function(){
document.onmousemove = null;
}
}全部代码：
实例
<!DOCTYPE html>
<html>
<style>
#ball {
width: 50px;
height: 50px;
background-color: lightpink;
border-radius: 50%;
box-shadow: 2px 2px 1px #888;
position: absolute;
}
</style>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="ball"></div>
</body>
<script>
var ball = document.getElementById('ball');
ball.onmousedown = function (event) {
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;
//console.log(x, y);
document.onmousemove = function (event) {
ball.style.left = event.clientX - x + 'px';
//console.log(ball.style.left);
ball.style.top = event.clientY - y + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
