HTML5商城开发二通过位移实现拖动效果

最新推荐文章于 2021-06-16 02:51:56 发布

转载最新推荐文章于 2021-06-16 02:51:56 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xcsn/p/4937966.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及jQuery实现自定义滚动效果的方法。通过监听鼠标事件，可以自由地在设定区域内上下拖动，并且在达到边界时会自动调整位置，避免显示空白区域。

1.效果

在该区域内，手按住拖动，该模块可上下滑动，至最顶或最底部，滑动出现空白区域将自动缩回

2.代码

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <style type="text/css">   
        .area-item {
            height: 100px;
            line-height:100px;
            border-bottom: 1px solid #333;
             font-size: 50px;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src='js/jquery.mobile.custom.js'></script>
    <script type="text/javascript">
        $(function () {
           $("#AreaList").height(2121);
            $("#AreaScroll").height(1000);

            //位置偏移量=真实高度-显示高度
            var endPos = $("#AreaList").height() - $("#AreaScroll").height();

            if (endPos > 0) {
                var startY = 0;
                var pos = 0;//真实位置
                $("#AreaScroll").on("vmousemove", function (event) {
                    $("#AreaList").css("transform", "translateY(" + (event.clientY - startY - pos) + "px)");
                });

                $("#AreaScroll").on("vmousedown", function (event) {
                    startY = event.clientY;
                });
                $("#AreaScroll").on("vmouseup", function (event) {
                    //判断正反方向并求位移
                    var posi = -pos + event.clientY - startY;

                    if (posi > 0) {
                        pos = 0;
                        $("#AreaList").css("transform", "translateY(0px)");
                    }
                    if (posi < 0 && posi >= -endPos) {
                        pos = -posi;
                        $("#AreaList").css("transform", "translateY(" + posi + "px)");
                    }
                    if (posi < -endPos) {
                        pos = endPos;
                        $("#AreaList").css("transform", "translateY(" + (-endPos) + "px)");
                    }
                });
            }
        });
    </script>
</head>
<body>

    <div id="AreaScroll" style="overflow: hidden;">
        <div id="AreaList" style="transform: translateY(0px);">
            <div class="area-item">0级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">11级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">12级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">13级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>
            <div class="area-item">一级台风</div>  
            <div class="area-item">2级台风</div>
        </div>
    </div>

</body>
</html>