实现html元素跟随touchmove事件的event.touches[0].clientX移动

时间：2016-08-31 20:34:16 阅读：449 评论：0 收藏：0 [点我收藏+]

标签：

主要是使用了transform:translateX 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>newWaterChart</title>
    <!--<link rel="stylesheet" href="css/newBarChart.css">-->
    <style>
        * {
            padding:0;
            margin:0;
            -webkit-box-sizing: border-box;
        }
        .chart-wrap {
            background-color: #7ecef4;
        }
        .chart-container {
            width:120%;
            height: 250px;
            padding-top: 100px;
            transform: translateX(-20px);
        }
        .chart-item {
            width: 20px;
            line-height: 120px;
            display: inline-block;
            border: 1px solid white;
            border-radius: 10px;
        }
        .flex-wrap {
            display: flex;justify-content: space-around;
        }
        .flex-item {

        }
        .chart-wrap {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="chart-wrap">
    <div class="chart-container flex-wrap">
        <span class="chart-item flex-item">1</span>
        <span class="chart-item flex-item">2</span>
        <span class="chart-item flex-item">3</span>
        <span class="chart-item flex-item">4</span>
        <span class="chart-item flex-item">5</span>
        <span class="chart-item flex-item">6</span>
        <span class="chart-item flex-item">7</span>
        <span class="chart-item flex-item">8</span>
        <span class="chart-item flex-item">9</span>
        <span class="chart-item flex-item">10</span>
        <span class="chart-item flex-item">11</span>
        <span class="chart-item flex-item">12</span>
    </div>
</div>

<script src="js/zepto.min.js"></script>
<!--<script src="js/newBarChart.js"></script>-->
<script>
    $(function () {
        var chartContanier = $(".chart-container");
        var touchstartClientX,
                touchmoveClientX,
                translateX,       //实时更新x轴偏移
                shiftLen,         //touchmoveClientX - touchstartClientX
                originalTranslateX,  //初始x轴偏移
                flagMove = false;  //是否触发了touchmove事件

        //matrix(1, 0, 0, 1, -20, 0) ,第四个为原本偏移长度
        originalTranslateX = parseInt(chartContanier.css("transform").split(",")[4]);

        chartContanier.on("touchstart", function (event) {
            var event = event || window.event;
            event.preventDefault();

            if (shiftLen !== undefined && flagMove) {
                originalTranslateX += shiftLen;
            }
            touchstartClientX = event.touches[0].clientX;
            flagMove = false;
        });
        chartContanier.on("touchmove", function (event) {
            var event = event || window.event;
            event.preventDefault();

            flagMove = true;
            touchmoveClientX = event.touches[0].clientX;
            shiftLen = touchmoveClientX - touchstartClientX;
            translateX = originalTranslateX + shiftLen;

            chartContanier.css("transform", "translateX(" + translateX + "px)");
        });

    });
</script>
</body>
</html>

标签：

原文地址：http://www.cnblogs.com/scnuwangjie/p/5827255.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行