主要是使用了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. 不要依赖hibernate的二级缓存

    一.hibernate的二级缓存   如果开启了二级缓存,hibernate在执行任何一次查询的之后,都会把得到的结果集放到缓存中,缓存结构可以看作是一个hash table,key是数据库记录的id ...

  2. java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    首先声明,这篇文章是从网上粘贴过来的.原文地址是:http://www.cnblogs.com/wangaohui/archive/2012/11/28/2791999.html.感觉写的很好,所以粘 ...

  3. 关于GestureDetector.OnGestureListener的onScroll参数distance问题

    关于GestureDetector.OnGestureListener类的onScroll方法参数distanceX和distanceY问题 看到有文章上说onScroll方法中distanceX和d ...

  4. Altium Designer同一个工程里不同原理图导入到不同的PCB

    问题: 在用Altium Designer进行PCB工程设计时,有时一个工程里可能不止一块PCB,比如,一个设备里有主板和扩展板或者按键板等等,这时就需要在一个工程里添加多个PCB文件.如图: 我们知 ...

  5. Linux系统编程（37）—— socket编程之原始套接字

    原始套接字的特点 原始套接字(SOCK_RAW)可以用来自行组装IP数据包,然后将数据包发送到其他终端.也就是说原始套接字是基于IP数据包的编程(SOCK_PACKET是基于数据链路层的编程).另外, ...

  6. HDU_2054——A=B问题

    Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...

  7. HDU4432 Sum of Divisors

    涉及知识点: 1. 进制转换. 2. 找因子时注意可以降低复杂度. Sum of divisors Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  8. MySQL慢查询（一） - 开启慢查询

    一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log 慢查询开启状态slow_q ...

  9. IOS XMPP

    http://www.cnblogs.com/lmyhao/p/4120616.html

  10. js的意义，引用方法及变量

    一 JavaScript的意义. Javascript是浏览器端的脚本语言,它能够访问web页面的元素和运行它得浏览器,从而可以操作元素,创建新的元素等.它主要的作用有: 1.以指定尺寸.位置和样式( ...