鼠标拖拽，滚动条滚动

最新推荐文章于 2024-07-22 17:30:43 发布

心鑫馨

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量2.7k

点赞数 1

分类专栏： css js

本文链接：https://blog.csdn.net/qq_36340642/article/details/79403130

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽，滚动条滚动</title>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <style type="text/css">
    html,body{display: block;width:100%;height: 1000px;margin: 0;padding:0;background: #00f000;}
    .popdiv{width:150px;height:150px;background:#fff000;position: absolute;left:10px;top:250px;cursor:pointer;}
    </style>
</head>
<body>
<div class="popdiv"></div>
<script type="text/javascript">
function setScroll(){
    var timer = null;
    var divtop = 150;
    $(window).scroll(function(){
        var scroll = $(window).scrollTop()+divtop;
        clearInterval(timer);
        timer = setInterval(function(){
            var divTop = $(".popdiv").offset().top;
            var speed = (scroll-divTop)/5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(divTop == scroll){
                clearInterval(timer);
            }else{
                var thetop = divTop + speed;
                $(".popdiv").offset({top:thetop});
            }
        },30);
    });
    var pageX,pageY;
    $(".popdiv").mousedown(function(event){
        pageX = event.pageX;
        pageY = event.pageY;
        var that = $(this);
        var disX = pageX - $(this).offset().left;
        var disY = pageY - $(this).offset().top;
        document.οnmοusemοve=function(event){
            var left = event.pageX - disX;
            var top = event.pageY - disY;
            var maxleft = $(window).width() - that.outerWidth() -10;
            var maxtop = $("body").height() - that.outerHeight() -10;
            if(left < 10){
                left = 10;
            }else if(left > maxleft){
                left = maxleft;
            }
            if(top < 0){
                top = 0;
            }else if(top > maxtop){
                top = maxtop;
            }
            $(".popdiv").offset({top:top,left:left});
        };
        document.οnmοuseup=function(event){
            divtop = event.clientY-disY;
            document.οnmοusemοve=null;
            document.οnmοuseup=null;
        };
        return false;
    });
}
setScroll();
</script>
</body>
</html>

心鑫馨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽，滚动条滚动

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标拖拽，滚动条滚动&lt;/title&gt; &lt;script type="text/javascript" src
复制链接

扫一扫

专栏目录