实例1.JS控制元素运动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js元素运动</title>
<style>
div {
width: 50px;
height: 50px;
background-color: #fff60e;
padding: 10px;
border: 2px solid red;
margin: 20px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 10px;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
/*获取按钮和小球*/
var btn = document.getElementsByTagName('button')[0];
var ball = document.querySelector('div');
console.log(btn);
console.log(ball);
//只需要改变ball元素的offsetleft就这个改变元素左边的距离，让球动起来
//要使用定时器函数，setInterval(函数,毫秒)用于间歇执行某一函数,
btn.onclick = function () {
var timer = null;
timer = setInterval(function () {
clearInterval(timer);
if (ball.offsetLeft < 500) {
/*先判断ball元素左边距是否小于500像素，如果起过500像素，就使用clearInterval清除定时器*/
ball.style.left = ball.offsetLeft + 1 + 'px';
} else {
ball.style.left = 10 + 'px';
}
}, 100)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.JS拖拽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS拖拽元素</title>
<style>
#ball {
width: 50px;
height: 50px;
background-color: #f00;
box-shadow: 2px 2px 3px #666;
border-radius: 50%;
position: absolute;
}
</style>
</head>
</head>
<body>
<div id="ball"></div>
<script>
/*
* 鼠标事件
* onmousedown，鼠标按下
* onmouseover，鼠标移动
* onmouseup，鼠标松开
*/
var ball = document.querySelector('#ball');
console.log(ball);
ball.onmousedown = function (event) {
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;
console.log('鼠标在球中的坐标X是' + x, '鼠标在球中的坐标Y是' + y);
/* 获取鼠标在ball对象中的X和Y坐标位置*/
document.onmousemove = function (event) {
ball.style.left = event.clientX - x + 'px';
ball.style.top = event.clientY - y + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
