<!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{width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 10px;
left:0;}
/*置顶*/
#d1{width: 1349px;
height: 3773px;
margin: 0 auto;
background: url("../img/1a.jpg") no-repeat;background-size: contain}
#d2{display: none;
width: 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);
})
})
}