主要是使用了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移动的更多相关文章

  1. 关于如何获取移动端 touchmove 事件中真正触摸点下方的元素

    移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是t ...

  2. 移动端touchstart、touchmove事件的基本使用

    在pc端,我们通常使用$(window).scroll()事件来监听元素的位置,来做一些入场动效,如: $(window).scroll(function(){ var panel3Move = do ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. JavaScript事件属性event.target和currentTarget 属性的区别。

    event.target 获取的是触发事件的标签元素 event.currentTarget 获取到的是发起事件的标签元素 一.事件属性:event.target target事件委托的定义:本来该自 ...

  5. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

  6. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  7. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

  8. javaScript动画3 事件对象event onmousemove

    事件对象的获取(event的获取) var event = event || window.event;(主要用这种) screenX.pageX和clientX的区别 PageY/pageX: 鼠标 ...

  9. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

随机推荐

  1. 魔法方法：算术运算 - 零基础入门学习Python042

    魔法方法:算术运算 让编程改变世界 Change the world by program 我现在重新提一个名词:工厂函数,不知道大家还有没有印象?我们在老早前就提到过Ta,由于那时候我们还没有学习类 ...

  2. FPGA那些事 --经典总结

    规范很重要 工作过的朋友肯定知道,公司里是很强调规范的,特别是对于大的设计(无论软件还是硬件),不按照规范走几乎是不可实现的.逻辑设计也是这样:如果不按规范做的话,过一个月后调试时发现有错,回头再看自 ...

  3. json转换为键值对辅助类

    /// <summary> /// json转换为键值对辅助类 /// </summary> public class JsonParser { private static ...

  4. BZOJ3397: [Usaco2009 Feb]Surround the Islands 环岛篱笆

    3397: [Usaco2009 Feb]Surround the Islands 环岛篱笆 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 11  So ...

  5. Palindrome Pairs 解答

    Question Given a list of unique words, find all pairs of distinct indices (i, j) in the given list, ...

  6. java中小工具————UUID

    示例代码: package com.lky.test; import java.util.UUID; import org.junit.Test; /** * @Title: testUUID.jav ...

  7. cnBlogs_代码着色

    一个程序员当然希望写出来的代码不仅质量上好,而且看上去也很好.以前在网络上看见别人写的代码,着色以及背景都好极了,很是羡慕,但就是不知道如何设置 --------------------------- ...

  8. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  9. mac显示隐藏文件夹

    ~/Library/Preferences/com.apple.finder AppleShowAllFiles -bool true (true 改成 false 就可以不再显示隐藏文件)需要重启, ...

  10. lesson3:使用java代码的方式对不能识别的协议进行压力测试

    在我们的实际环境中,我们所使用的协议肯定不只是http的方式,对于rpc等调用协议,目前jmeter没有相应的sampler支持,这时就需要通过引入我们自己写的jar包的方式来解决这个问题.例如:当我 ...