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

     求教卡饭网友,都快疯掉了.      最近搞设计,电脑频发出现蓝屏,今晚都出现三次了,新装的win7 64位系统,都是安装的原版光驱.     错误代码基本上都是:0x00000124 (0x000 ...

  2. [Python笔记]第一篇:基础知识

    本篇主要内容有:什么是python.如何安装python.py解释器解释过程.字符集转换知识.传参.流程控制 初识Python 一.什么是Python Python是一种面向对象.解释型计算机程序设计 ...

  3. .SO 出现 undefined reference

    查看本SO文件依赖哪些其他的SO文件: readelf -d ldd undefined reference 涉及的问题是  主程序及静态库不能定位地址 undefined symbol 说的问题是动 ...

  4. C程序设计语言练习题1-21

    练习1-21 编写程序entab,将空格串替换为最少数量的制表符和空格,但要保持单词之间的间隔不变.假设制表符终止的位置与练习1-20的detab程序的情况相同.当使用一个制表符或者一个空格都可以打到 ...

  5. 关于Cococs中的CCActionEase

    尊重作者劳动,转载时请标明文章出处.作者:Bugs Bunny地址:http://www.cnblogs.com/cocos2d-x/archive/2012/03/13/2393898.html 本 ...

  6. 转：enum与typedef enum的用法

    来自:http://blog.sina.com.cn/s/blog_817a5eb6010146ad.html 作者:于超峰 在程序中,可能需要为某些整数定义一个别名,我们可以利用预处理指令#defi ...

  7. 通过button提交表单

    通过 input button 而不是input submit提交. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. TextView 超链接点击跳转到下一个Activity

    1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...

  9. SqlMapConfig.xml全局配置文件解析

    一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) settings(全局配置参数) typeAiases(类型别名) typeHandlers(类型处理器 ...

  10. 【HDOJ】2585 Hotel

    字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...