HTML5商城开发二通过位移实现拖动效果-阿里云开发者社区

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

2015-11-05 965

简介： 1.效果在该区域内，手按住拖动，该模块可上下滑动，至最顶或最底部，滑动出现空白区域将自动缩回 2.代码首页 .area-item { height: 100px; line-...

+关注继续查看

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>

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

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