版权声明：版权所有-江西服装学院 https://blog.csdn.net/qq_38263696/article/details/83082591
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this is a test</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
p{
margin-top:10px;
}
.box{
width: 200px;
height: 200px;
position: relative;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div class="box">
拖我
</div>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br>
<hr>
<br>
<br><hr><br><br>
<hr> <br><br><hr>
<a href="javascript:void(0)" id="my_scrollTop">回顶部</a>
</body>
</html>
<script type="text/javascript">
var a = document.getElementById('my_scrollTop');
a.onclick = function(event){
event = event || window.event;
event.stopPropagation();
event.preventDefault();
var timer = setInterval(scrollBar,10);
function scrollBar(){
scrollBy(0,-10);
if(scrollY ==0){
clearInterval(timer);
}
}
}
var box= document.getElementsByClassName('box')[0];
gray(box);
function gray(ele){
ele.onmousedown = function(event){
console.log(event.type);
event=event||window.event;
var downX = event.clientX;
var downY = event.clientY;
var eleStart = ele.getBoundingClientRect();
var eleStartX =eleStart.x;
var eleStartY = eleStart.y;
event.stopPropagation();
event.preventDefault&&event.preventDefault();
function mousemoveHandler(event){
event = event||window.event;
ele.style.left = eleStartX+event.clientX - downX+scrollX + 'px';
ele.style.top = eleStartY+event.clientY - downY +scrollY +'px';
console.log(event.type);
event.stopPropagation();
}
function mouseupHandler(event){
console.log(event.type);
document.removeEventListener('mousemove',mousemoveHandler,true);
document.removeEventListener('mouseup',mouseupHandler,true);
}
document.addEventListener('mousemove',mousemoveHandler,true);
document.addEventListener('mouseup',mouseupHandler,true);
}
}
</script>