JQuery在PC端实现手机触屏垂直滑动效果

JQuery在PC端实现手机触屏垂直滑动效果

  经常会遇到下拉框过长出现垂直滚动条的情况,有时候这个长度还是由用户来增加的。
  比如:有一个评价菜单,单击它会出现一个浮层,这个浮层列出了很多评语,这些评语都是用户自己增加的,该帐号下的所有的用户增加的评价都会显示出来。很快这个浮层的长度就超过了窗口的长度,那就会出现滚动条,然后样式就丑爆了。
  浮层的宽度本身就不宽,也就滚动条宽度的3-5倍,再就是滚动条的样式每个浏览器都不同。IE的滚动条只可以调整颜色,Chrome的滚动条颜色大小都可以改,Firfox的滚动条就直接没法改的。
  个人觉得移动端的滑动效果挺方便实用的,于是想在pc端实现这个效果。水平滑动效果的代码网上其实已经有了,垂直滑动的我倒是没找着,所以自己整了一个。

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test page</title>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <style type="text/css">
        li {width: 75px; }
    </style>
</head>
<body>
    <div class="aa" style="border: 1px solid red;cursor: move;width: 150px; height: 378px; margin: 16px 0px; position: relative; 
    top: 105px; right: auto; bottom: auto; left: 700px; padding: 0px; display: block;overflow: hidden;">
        <div class="testDiv" id="testDiv" style="cursor: move;list-style: none;margin-left: 36px;">
            <li><img src="images/1.png" alt="" /></li>
            <li><img src="images/2.png" alt="" /></li>
            <li><img src="images/3.png" alt="" /></li>
            <li><img src="images/4.png" alt="" /></li>
            <li><img src="images/5.png" alt="" /></li>
            <li><img src="images/6.png" alt="" /></li>
            <li><img src="images/7.png" alt="" /></li>
            <li><img src="images/8.png" alt="" /></li>
            <li><img src="images/9.png" alt="" /></li>
            <li><img src="images/10.png" alt="" /></li>
            <li><img src="images/1.png" alt="" /></li>
            <li><img src="images/2.png" alt="" /></li>
            <li><img src="images/3.png" alt="" /></li>
            <li><img src="images/4.png" alt="" /></li>
            <li><img src="images/5.png" alt="" /></li>
        </div>
    </div>
</body>
</html>

JQUERY代码一:鼠标单击然后上滑下滑

$(document).ready(function () {
    var xnew=0, ynew=0;
    $('#testDiv').mousedown(function(e){
        x = e.pageX;
        y = e.pageY;
        dragJob = true;         
    });
    document.onmousemove = function (e) {
        e.preventDefault();
        xnew= e.pageX;
        ynew = e.pageY;
        var xchange = xnew - x;
        var ychange = ynew - y;
        var oldmargin = parseInt($("#testDiv").css("margin-top")); 
        var newMargin = oldmargin + ychange;
        if(newMargin < 10 && newMargin > -800){
            if (dragJob) {
                $("#testDiv").css("margin-top",oldmargin + ychange);
            }
        }
    };
    document.onmouseup = function (e) {
        dragJob = false;
    };
});

JQUERY代码二:鼠标滚轮滑动时实现上滑下滑

document.body.onmousewheel = function(e) {
//上滑
    if(e.wheelDelta == 120){
        var oldmargin = parseInt($("#testDiv").css("margin-top"));
        if(oldmargin == -780){
            oldmargin = -750;
        }
        if(oldmargin >= -750 && oldmargin <= 0){
            var newMargin = oldmargin + 30;
            $("#testDiv").css("margin-top",newMargin);
        }
    }
    //下滑
    if(e.wheelDelta == -120){
        var oldmargin = parseInt($("#testDiv").css("margin-top"));
        if(oldmargin == 30){
            oldmargin = 0;
        } 
        if(oldmargin >= -750 && oldmargin <= 0){
            var newMargin = oldmargin - 30;
            $("#testDiv").css("margin-top",newMargin);
        }
    }
};
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值