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

Posted 阳子杰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现html元素跟随touchmove事件的event.touches[0].clientX移动相关的知识，希望对你有一定的参考价值。

主要是使用了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>

 

以上是关于实现html元素跟随touchmove事件的event.touches[0].clientX移动的主要内容，如果未能解决你的问题，请参考以下文章

移动端实现拖动操作

html5 touch 触摸事件如何监听一个手指多次来回摩擦触发事件？

移动端事件（touchstart+touchmove+touchend）

jquery事件参数和相关事件

小程序·使用echarts不跟随父元素滑动的问题

touchmove 事件指示的自定义滑动事件