zoukankan html css js c++ java

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

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>

查看全文

相关阅读:
540C： Ice Cave
540B ：School Marks
欧拉工程第52题：Permuted multiples
欧拉工程第51题：Prime digit replacements
C. Tourist's Notes
B. Quasi Binary
Keepalived安装后出现的问题总结
 Keepalived+HAproxy实现高可用负载均衡
 CentOS.56安装Redis监控工具RedisLive
Redis+Keepalived主从热备秒级切换

原文地址：https://www.cnblogs.com/xcsn/p/4937966.html

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

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