JQuery 拖动页面实现页面滚动

来源：互联网发布：知乎手机如何发文章编辑：程序博客网时间：2024/06/05 20:42

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script></head><body>    <div id="dragWrap" class='jy-dragscroll' style='width:1000px;height:3000px;overflow:auto;'> 测试内容</div></body><script>    $(function(){        $('.jy-dragscroll').each(function(){            var downx;            var downy;            var upx;            var upy;            $(this).mousedown(function(e){                downx = e.clientX;                downy = e.clientY;                $('#dragWrap').html(downx+','+downy);            });            $(this).mouseup(function(e){                upx = e.clientX;                upy = e.clientY;                $('#dragWrap').html(upx+','+upy);                var x = downx-upx;                var y = downy-upy;                var scrollx = $(document).scrollLeft();                scrollx += x;                $("html,body").animate({scrollLeft:scrollx},500);            });        });    });</script></html>

阅读全文

0 0