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

1.效果

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUcAAAFXCAIAAAC+/RunAAAQyElEQVR4nO3d/0cuT//A8RWHRCKSiCMSOSQOOSQSR0TiiEQOkUQkEpHzn73vv+36/JAZOztf9nXN7O58rpnn46dr9+qanTvnee3svruvq2mUf//+NUM4PT09OTlJH2dpaenz8zN9nKZpzs7Ojo+P08f59u3bx8dH+jhN0/z+/fvXr1/p4ywvL7+/v6eP0zTN+fn50dFR+jgrKytvb2/p4zRNc3Fx8fPnz/RxVldXX19f08dpmuby8vLw8DB9nLW1tZeXl/Rxmqa5uro6ODhwP0fVvahagqolqDoVVUtQtQRVJ6FqCaqWoOpUVC1B1RJULUHVSahagqolMlTd+S1sbW09PDzozb29vZubG7358+fPi4sLvdmpuvNbuL293d3d1ZuPj4+bm5t68+3tbWVl5etxp+rOb2F7e/v+/l5v7u/vX19f682jo6Pz83O92am681u4u7vb2dnRm09PTxsbG3rz/f19eXn563Gn6vX19efnZ735/fv3v3//6s0fP378+fNHb/769ev37996s1P1nz9/fvz4oTf//v37/ft3vfn8/Ly+vq43Pz4+vn379vW4U/XGxsbT05Pe3NnZubu705sHBwdXV1d68/j4+OzsTG92qr6+vt7f39eb9/f329vbevPl5WVtbU1vfn5+Li0tfT3uVL25ufn4+Kg3d3d3b29v9ebh4eHl5aXePDk5OT091Zudqm9ubvb29vTmw8PD1taW3nx9fV1dXdWbNf971o+r/i1QdUPVSgH/nvXjqn8LVN1QtVLAv2f9uOrfAlU3VK0U8O9ZP676t0DVDVUrBfx7bv4pMwAL62eLLrzJPSsA8agaKA1VA6Uxql5Vcs8KQDyj6lcl96wAxGMFDpSGqoHSUDVQGqPqLSX3rADEM6p+UHLPCkC81BV49HKddT4wksGqbjx6XxgePEA+SaAqSVXbP9nZ4xtKeIjENwWgTkbVe4r9c87aw3vkSUfET9WAj1H1jdL5ofYyW7hz5glvroC/djrP/1QN+PSvwH1ROS9xnan7hup9NvDGQdWAT2TVvZvO4CV8g3dipmrAJ6nq3ivk8KaNqoF0RtX6UfsnAmfjzlj22jixvbneUAB8Maq+UNo/Ib+ullQtXHsHDu0bGcCX+BV4YPlt5+0bLbyfFTgQIfVumfOpKasmb6BD9Ldl4fOzs+G56vXtdx5X8t4B1Myo+lSxf65Tu91/4LzaGcc5D/lbCVUDYUbVJ4rkleGk7cd6j/BumSRX3202oGaiFbiQJE7huVo+B6oGOoasGsD/B1QNlMao+lLJPSsA8YyqD5XcswIQjxU4UBqqBkpD1UBpjKpvldyzAhDPqHpX0U//B2BBuKtmBQ4UgKqB0lA1UBqj6kcl96wAxDOq3lRyzwpAPFbgQGmoGigNVQOlMap+U9LHTflAlfSjAzUzql5R0sdtWp8Z6NT7wt7xA9LnDyyuUVbg9ghN1KeXzXWIiEGAImWoWp50XLpUjcoZVS8pKSO21972zpmnunnP3o3/qwWoGpUzqv5UoofzXd86U7ef9Y0Z2GkfhapRubH+y5bvQtoZvERg/E7MVI3K9VQtTM53ZvbtCW/aqBqQG/5c7SswnH3iUYYdHFhoRtVrSvRwzrO3pGr52ts5AlUDmlH1i5IyYmC1bOcdeJV8PytwoG2KvwPPVTV5o04j3gN3NpxSr3O/c+0dePsAijdw1fYIgZNq54W+AQM7fW8ZVI2aGVVvKykjhpO2H+s98rtlklzHuJQAFoJR9b0y7DGcgUWvzOWtUjXqNMXdMgBTomqgNFQNlMaoel/JPSsA8Yyqr5XcswIQjxU4UBqqBkpD1UBpjKqPFP30/wAsCHfV50qO9xcAw2AFDpSGqoHSUDVQGqPqMyX3rADEM6o+VnLPCkA8VuBAaagaKM1YVUcPwnsKkMio+kpJH7dpfTCgU+8Le8cPSJ8/sLiMqg+UxEHtrprYTymTHyJiEKBIo6zAw1XLk45Ll6pRueGrbq+97Z0zT3Xznr0b/1cIUDUqN3DVvutbZ+r2s74xAzvto1A1KmdUfaekj+u7kHYGLxEYvxMzVaNyRtU7in5amJzvzOzbE960UTUgN+J1dWdPOPvEoww7OLDQpriullQtX3s7R6BqQJvuXD1z5R14lXw/K3Cgzaj6SRn2GLmqJm/Uyah6Q0kfV5/zhTfGovc7196Btw+geGNdV7f3dB6nn6t9Z2OqBmZjX1dLHus98rtlkhmm/w8BFtQofwfe4RwzemUunx5Vo05G1e9K7lkBiGdUvazknhWAeFOswAFMiaqB0hhVf1NyzwpAPKPqDyX3rADEYwUOlIaqgdL0VP0fgAXhrnpdyfH+AmAYRtXPSu5ZAYjHdTVQGqoGSkPVQGmMqr8ruWcFIJ5R9V8l96wAxGMFDpRmrKqjB+E9BUg0etXWx5D1HEJ4dN+wrDUAo+ofSuKgdldN7KeUyQ8RMQhQJKPqP0rioOGq5UnHpUvVqNzwK/D22tveOfNUN+/Zu/F/hQBVo3IDV+27vnWmbj/rGzOw0z4KVaNyE90Dt2+etZ+SCIzfiZmqUTmj6l+KflqYnO/M7NsT3rRRNSBnVP1bSRnRV2A4+8SjDDs4sNCmuK6WVC1feztHoGpAG/EeuL3HzjvwKvl+VuBA2xR/B56ravJGnYa/rv6i3x2EN8ai9zvX3oG3D6B4PffA5xW+Hz7Uudp3NqZqYMa30gPlmei6OnALzbkZ2C+fHlWjTlNUDWBKRtVD/X+2AGRkVD3U/78aQEaswIHSUDVQGqoGSmNUzeeBAwUwqua7O4AC9KzAc3/PNgApadUAFg5VA6Uxqn5Wcs8KQDyj6nUl96wAxGMFDpSGqoHSUDVQGqPqDyX3rADEM6r+pqSPG33CZ6UAJBprBd60PhjQqfeFveMHpM8fWFyjVG2P0MR+Spn8EBGDAEUyql5WEgcNVy1POi5dqkbljKrflZQR22tve+fMU928Z+/G/xUCVI3KDbwC913fOlO3n/WNGdhpH4WqUbnR75Z1Np3BSwTG78RM1ahcT9XC5HxnZt+e8KaNqgE5o+oNJWVEX4Hh7BOPMuzgwEIzqn5Soodznr0lVcvX3s4RqBrQhr+uDqyW7bwDr5LvZwUOtI11t6wtV9XkjTqNeA/c2XBKvc79zrV34O0DKJ5R9Y4SPVz4fvhQ52rf2ZiqgVmn6jslZcRw0vZjvUd+t0yS6xiXEsBCmOi6OnALzbkZ2C+fHlWjTlNUDWBKVA2Uxqj6QMk9KwDxjKqvlNyzAhCPFThQGqoGSkPVQGmMqo+V3LMCEM+o+kzRT+f+nm0AUu6qWYEDBaBqoDRUDZTGqPpcyT0rAPGMqo+U3LMCEI8VOFAaqgZKQ9VAaYyqr5X0caPfGnhPARIZVe8r6eM2rQ8GdOp9Ye/4AenzBxbXKCtwe4Qm9lPK5IeIGAQokrTquToMVy0fKi5dqkbl+qv2pR7Y33kQeBze2bvfuQSgalTOqPpesX9OWJ3v+taZeu/gkpfYR6FqVM6oeluxfy7uXGpvOoOXCIzfiZmqUbkM19W9m/MOSNVA2/BV+/b0XlrPJfC+QNWo3MBVO5fNkqrla2/fcXunClTCqPpFsX8u/Vw9c+UdMb69nxU40GZUvabYPzdvdc6fmbhq8kadRrlbNmt9D6bwxlj0fufaO/D2ARRvjr9C6Tzlu4S2f6zzOP1dw3c2pmpgNsbfgYeTth/rPT7hQwSmQdWok1H1pzLsMZyBRa/M5a1SNepkVL2k5J4VgHjDr8AB5EXVQGmMqleU3LMCEM+o+k3JPSsA8ViBA6WhaqA0VA2Uxqh6U9FP/w/AgnBX/ajkeH8BMAxW4EBpqBooDVUDpTGq3lVyzwpAPKPqWyX3rADEYwUOlIaqgdKMVXX0ILynAImMqg+V9HGb1gcDCj+NrPPC3vED0ucPLC6j6kslcVC7qyb2U8rkh4gYBCjSKCvwcNXypOPSpWpUbviq22tve+fMU928Z+/G/xUCVI3KDVy17/rWmbr9rG/MwE77KFSNyhlVnyjp4/oupJ3BSwTG78RM1aicUfWpop8WJuc7M/v2hDdtVA3IjXhd3dkTzj7xKMMODiy0Ka6rJVXL197OEaga0KY7V89ceQdeJd/PChxoM6q+UIY9Rq6qyRt1MqrWj9LH1ed84Y2x6P3OtXfg7QMo3ljX1e09ncfp52rf2ZiqgRnfSg+UZ5S/A+9wjhm9MpdPj6pRJ6PqGyX3rADEM6reU3LPCkC8KVbgAKZE1UBpqBoojVH1g5J7VgDiGVVvKblnBSAeK3CgND1V5/6ebQBS0qoBLByj6lcl96wAxDOqXlVyzwpAPFbgQGmoGigNVQOlMar+p+SeFYB4nKuB0oxVdfQgvKcAiUavuvHofWHv+AHp8wcW1yj/vdruqon9lDL5ISIGAYo0yt+WhauWJx2XLlWjcsOvwNtrb3vnzFPdvGfvxv8VAlSNyg1cte/61pm6/axvzMBO+yhUjcpNdA/cvnnWfkoiMH4nZqpG5Yyq7c9CESbnOzP79oQ3bVQNyBlVD/K5Zb4Cw9knHmXYwYGFNsV1taRq+drbOQJVA9qI98DtPXbegVfJ97MCB9qm+DvwXFWTN+pkVD3g92zpdwfhjbHo/c61d+DtAyieUXX6d2KG74cPda72nY2pGpjxrfRAeSa6rg7cQnNuBvbLp0fVqNMUVQOYklG1fpR7VgDiGVVfKLlnBSAeK3CgNFQNlIaqgdIYVZ8quWcFIJ5R9YmSe1YA4vWswP8DsCCkVQNYOFQNlMao+lLJPSsA8YyqD5XcswIQjxU4UBqqBkpD1UBpjKpvldyzAhDPqHpXSR83+oTPSgFINNYKvGl9MKBT7wt7xw9Inz+wuEap2h6hif2UMvkhIgYBipShannScelSNSpnVP2opIzYXnvbO2ee6uY9ezf+rxCgalTOqHpTiR7Od33rTN1+1jdmYKd9FKpG5Ua/W9bZdAYvERi/EzNVo3I9VQuT852ZfXvCmzaqBuSGP1f7Cgxnn3iUYQcHFppR9ZsSPZzz7C2pWr72do5A1YBmVL2ipIwYWC3beQdeJd/PChxoG+tuWVuuqskbdRrxHriz4ZR6nfuda+/A2wdQPKPqJSV6uPD98KHO1b6zMVUDs07Vn0rKiOGk7cd6j/xumSTXMS4lgIUw0XV14BaaczOwXz49qkadpqgawJSoGiiNUfWakntWAOIZVb8ouWcFIB4rcKA0VA2UhqqB0hhVbyu5ZwUgnlH1vaKfzv092wCk3FWzAgcKQNVAaagaKI1R9b6Se1YA4hlVXyu5ZwUgHitwoDRUDZSGqoHSGFUfKenjRr818J4CJDKqPlfSx21aHwzo1PvC3vED0ucPLK5RVuD2CE3sp5TJDxExCFCkDFXLk45Ll6pRueGrbq+97Z0zT3Xznr0b/1cIUDUqZ1R9pkQP57u+daZuP+sbM7DTPgpVo3JG1cdK+ri+C2ln8BKB8TsxUzUq17MCFybnOzP79oQ3bVQNyI14Xd3ZE84+8SjDDg4stIGrdp69JVXL197OEaga0Iyqr5SUEQOrZTvvwKvk+1mBA21G1QfKsMfIVTV5o06j/BXKjG+lB/IZ67q6vafzOP1c7TsbUzUwG/seuOSx3iO/WyaZ4VCLDmDhGFXfKcMewxlY9Mpc3ipVo05G1TtK7lkBiDfW3TIAuVA1UBqqBkpjVP2k5J4VgHhG1RtK7lkBiMcKHCgNVQOlaVf9f4JdCD4Ew0iPAAAAAElFTkSuQmCC" alt="" />

2.代码

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <style type="text/css">
        .area-item {
            height: 100px;
            line-height:100px;
            border-bottom: 1px solid #;
             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();
            $("#AreaScroll").height();

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

            if (endPos > ) {
                var startY = ;
                var pos = ;//真实位置
                $("#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 > ) {
                        pos = ;
                        $("#AreaList").css("transform", "translateY(0px)");
                    }
                    if (posi <  && 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>