鼠标拖拽与置顶

<!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);
        })
    })
}

  

原文地址:https://www.cnblogs.com/Aledebaran/p/7693441.html