<h2>刚开始学H5的js，所以就全用js做的，只是为了锻炼自己的js基础</h2>
<h2>以下就是我整个H5的代码</h2>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.background = 'red';
box.style.position = 'absolute';
document.body.appendChild(box);
//onmounsedown、onmounsemove、onmouseup;
// 这三个事件标识着鼠标拖移的三个状态点，
// 1、鼠标按下 2、鼠标移动 3、鼠标弹起
box.onmousedown = function (event) {
event = event || window.event;
//disX和disY是鼠标在box上点击的位置距离左、上的边距
// var disX = event.clientX - box.offsetLeft;
// var disY = event.clientY - box.offsetTop;
var disX = event.offsetX;
var disY = event.offsetY;
//紧接着触发鼠标移动事件
document.onmousemove = function (event) {
event = event || window.event;
//通过鼠标在可视范围内的横纵坐标，来计算div的left和top值
var left = event.clientX - disX;
var top = event.clientY - disY;
//通过新的left、top值来修改div的位置
box.style.left = left +'px';
box.style.top = top + 'px';
}
//鼠标弹起事件
document.onmouseup = function() {
document.onmousemove = null;//结束移动事件监听
}
}
</script>
</html>
</pre>
网友评论