<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="oyzl">
<meta name="keywords" content="鼠标拖拽与置顶">
<meta name="Deacription" content="jq鼠标拖拽与置顶">
<title>鼠标拖拽与置顶</title>
<link rel="stylesheet" href="../css/鼠标拖拽.css">
<script type="text/javascript"src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/鼠标拖动.js"></script>
</head>
<body>
<!--鼠标拖拽-->
<div id="div1"></div>
<!--置顶-->
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
*{margin: 0;padding: 0;}
/*拖拽*/
#div1{ 100px;
height: 100px;
background-color: red;
position: absolute;
top: 10px;
left:0;}
/*置顶*/
#d1{ 1349px;
height: 3773px;
margin: 0 auto;
background: url("../img/1a.jpg") no-repeat;background-size: contain}
#d2{display: none;
96px;
height: 96px;
background-color: #00FF00;
position: fixed;
right:0;
bottom:10px;}
置顶：display: none;了 记得打开
$(function () {
Down_Move_Up();
Scroll();
})
//拖拽
function Down_Move_Up() {
var b = false;
var o;
var disX,disY;
$("#div1").mousedown(function (e) {
b = true;
o = $(this).offset();
var left = o.left;
var top = o.top;
disX = e.clientX - left;
disY = e.clientY - top;
});
$("#div1").mousemove(function (e) {
if (b){
var left = e.clientX - disX;
var top = e.clientY - disY;
o.left =left;
o.top =top;
$(this).offset(o);//更新div方位对象
}
});
$("#div1").mouseup(function () {
b = false;
});
}
//置顶
function Scroll() {
var dh = $(window).height();
$(document).scroll(function () { //scroll滚动
var top = $(document).scrollTop();
if (top>dh){
$("#d2").show();
}else{
$("#d2").hide();
}
$("#d2").click(function () {
var timer = setInterval(function () {
var top = $(document).scrollTop();//获取当前的滚动距离
var speedTop = top/5;
$(document).scrollTop(top-speedTop);
if(top == 0){
clearInterval(timer);
}
},30);
})
})
}