主要是使用了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. 文成小盆友python-num12 Redis发布与订阅补充，python操作rabbitMQ

    本篇主要内容: redis发布与订阅补充 python操作rabbitMQ 一,redis 发布与订阅补充 如下一个简单的监控模型,通过这个模式所有的收听者都能收听到一份数据. 用代码来实现一个red ...

  2. DPC定时器

    KeInitializeTimer 初始化定时器 KeInitializeTimerEx 初始化定时器 KeSetTimer 开启定时器(只执行一次) KeSetTimerEx 开启定时器(可以设置循 ...

  3. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  4. 解决Android ListView 和 ScrollView 共存时冲突 问题 方法其一

    转载请注明出处: http://www.goteny.com/articles/2013/11/8.html http://www.cnblogs.com/zjjne/p/3428480.html 当 ...

  5. 摇滚吧HTML5！有声前端交互！（一）

    生命的伊始,婴儿用明亮的哭声宣告一个新生命的诞生,睁开双眼之前,一双小耳朵已经开始聆听这个世界.在如今的用户体验领域,几乎所有公司都会有视觉设计师,却鲜有注重听觉交互的公司.随着各大厂商对HTML5支 ...

  6. 转：Spine.JS+Rails重客户端Web应用技术选型思路：『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  7. Spark任务调度流程及调度策略分析

    Spark任务调度 TaskScheduler调度入口: (1)       CoarseGrainedSchedulerBackend 在启动时会创建DriverEndPoint. 而DriverE ...

  8. 转：用 git 下载 uboot 源码

    1. 起因: 想下载 uboot 源码,原先的方法都是下载压缩包,然后放到虚拟机上的 Ubuntu ,再解压. 在看 uboot 源码的时候,发现 v2016.01 版本的uboot中关于 board ...

  9. 微信支付开发+{ping++}微信支付托管

    ------------------------微信支付接口------------------------------- 微信支付开发并没有想象中的那么难,主要是微信提供了sdk. 微信公众号必须是 ...

  10. coreOS+Docker新一代企业轻量级Linux

    CoreOS官网主页使用一句话概括其理 念:“A new way to think about servers”,以及紧接着的“CoreOS is Linux for massive server d ...