主要是使用了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. d023: 各位数字之和

    内容: 求输入的一个整数的各位数字之和 输入说明: 一行一个整数 输出说明: 一个整数 输入样例: 2147483646 输出样例 : 45 #include <stdio.h> int ...

  2. CSS jQuery 图片全屏切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 转：Durandal快速入门

    Durandal是一个轻量级的JavaScript框架,其目标是单页面应用(SPAs)的开发变得简单而优雅.它支持MVC.MVP和MVVM等模式,因此不论你采用哪种类型的前端架构,Durandal都能 ...

  4. [LeetCode 110] - 平衡二叉树 (Balanced Binary Tree)

    问题 给出一棵二叉树,判断它是否在高度上是平衡的. 对于本问题,高度上平衡的二叉树定义为:每个节点的两棵子树的深度差永远不大于1的一棵二叉树. 初始思路 根据定义,思路应该比较直接:递归计算每个节点左 ...

  5. css设置水平垂直居中

    关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...

  6. 获取SQL段的执行时间

    对SQL进行优化 经常会需要知道这条SQL语句执行的时间,这里介绍我的一种常用做法 DECLARE @d DATETIME SET @d=GETDATE() --do something --for ...

  7. poj2114 Boatherds

    Description Boatherds Inc. is a sailing company operating in the country of Trabantustan and offerin ...

  8. redis 异常排查

    异常排查 redis-server redis.windows.conf D:\redis-2.8.17>redis-server.exe redis.windows.conf[4692] 27 ...

  9. Gulp-livereload:实时刷新编码

    实现功能 监听指定目录下的所有文件,实时动态刷新页面 安装(Install) 功能的实现是借助 gulp-connect 插件完成的;所以,首先通过下面命令完成插件安装: npm install -- ...

  10. 【从零学习openCV】IOS7下的人脸检測

    前言: 人脸检測与识别一直是计算机视觉领域一大热门研究方向,并且也从安全监控等工业级的应用扩展到了手机移动端的app,总之随着人脸识别技术获得突破,其应用前景和市场价值都是不可估量的,眼下在学习ope ...