html5 实现简易 slider

来源：互联网发布：geekbench mac下载编辑：程序博客网时间：2024/05/20 13:38
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="zepto.js"></script>    <style>        .container {            width: 900px;            height: 100px;            background-color: gray;            position: relative;        }        .bar {            height: 100px;            width: 100px;            background-color: red;            position: absolute;            top: 0px;            left: 0px;            -webkit-transition: left 300ms;            transition: left 300ms;        }    </style></head><body><div class="container">    <div class="bar" style="left: 10%;"></div></div><script>    $(function () {        $(".bar").on("touchstart", function (e) {            $("#msg").append("<div>touchstart</div>");        })        $(".bar").on("touchmove", function (e) {            var percent = e.changedTouches[0].pageX / 900;            if (percent > 1) {                percent = 1;            }            if (percent < 0) {                percent = 0;            }            $(".bar").css("left", percent * 100 + "%");        })        $(".bar").on("touchend", function (e) {            var percent = e.changedTouches[0].pageX / 900;            if (percent > 1) {                percent = 1;            }            if (percent < 0) {                percent = 0;            }            $(".bar").css("left", percent * 100 + "%");        })    })</script></body></html>
0 0