h5项目需根据几条弯曲的线条让用户进行曲线式滑动，滑动时需实时响应某些样式，于是就有了下面这个实例。（可自定义多个子对象大小分别放在线条各处，以增加曲线滑动确认精度。）

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>手机端触屏手指曲线滑动确认</title>
  6. <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">
  7. <script type="text/javascript">
  8. var touch_screen = {
  9.     //曲线滑动确认
  10.     curve_confirm: {
  11.         _object: null,
  12.         _object_children_length: null,
  13.         _object_children:null,
  14.         _is_start: false,
  15.         _fn: function() {},
  16.         start: function() {
  17.             var self = this;
  18.             //开始滑动
  19.             var start = function(e) {
  20.                 self._is_start = true;
  21.                 for (var i = 0, j = self._object_children_length; i < j; i++) {
  22.                     var sub_object = self._object_children[i];
  23.                     sub_object.setAttribute("alt", "");
  24.                     sub_object.style.background = "";
  25.                 }
  26.             }
  27.             //滑动中
  28.             var move = function(e) {
  29.                 e.preventDefault();
  30.                 var obj = self._object;
  31.                 if (self._is_start) {
  32.                     var x = e.targetTouches[0].pageX;
  33.                     var y = e.targetTouches[0].pageY;
  34.                     for (var i = 0; i < self._object_children_length * 2; i++) {
  35.                         var _o = obj.childNodes[i],
  36.                             _w = _o.offsetWidth,
  37.                             _h = _o.offsetHeight;
  38.                         _left = _o.offsetLeft, _top = _o.offsetTop;
  39.                         if (x >= _left && x < (_left + _w) && y > _top && y < (_top + _h)) {
  40.                             var sub_object = obj.childNodes[i];
  41.                             sub_object.setAttribute("alt", "yes");
  42.                             sub_object.style.background = "#f00";
  43.                         }
  44.                     }
  45.                 }
  46.             }
  47.             //滑动结束时
  48.             var end = function(e) {
  49.                 self._is_start = false;
  50.                 var n = 0;
  51.                 for (var i = 0, j = self._object_children_length; i < j; i++) {
  52.                     var sub_object = self._object_children[i];
  53.                     if (sub_object.getAttribute("alt") == "yes") {
  54.                         n++;
  55.                     }
  56.                 }
  57.                 if (n == self._object_children_length) {
  58.                     n = 0;
  59.                     if (typeof self._fn == "function") {
  60.                         self._fn();
  61.                     }
  62.                 }
  63.             }
  64.  
  65.             document.addEventListener("touchstart", start, false);
  66.             document.addEventListener("touchmove", move, false);
  67.             document.addEventListener("touchend", end, false);
  68.         },
  69.         //初始化
  70.         init: function(o, fn) {
  71.             var class_clone = function(source) {
  72.                 var result = {};
  73.                 for (var key in source) {
  74.                     result[key] = typeof source[key] === "object" ? class_clone(source[key]) : source[key];
  75.                 }
  76.                 return result;
  77.             }
  78.             var self = class_clone(touch_screen.curve_confirm);
  79.             self._object = document.getElementById(o);
  80.             self._object_children = self._object.getElementsByTagName("div");
  81.             self._object_children_length = self._object_children.length;
  82.             self._fn = fn;
  83.             if (!self._object) {
  84.                 alert('bind_object is not an object');
  85.                 return false;
  86.             }
  87.             self.start();
  88.         }
  89.     }
  90. }
  91.  
  92. //页面加载完成
  93. window.onload = function() {
  94.     touch_screen.curve_confirm.init("curve_item", function() {
  95.         alert("曲线已匹配！");
  96.     });
  97. }
  98. </script>
  99.  
  100. <style type="text/css">
  101. html, body {
  102.     margin: 0;
  103.     padding: 0;
  104.     width: 100%;
  105.     height: 100%;
  106.     overflow: hidden;
  107.     background: #000;
  108. }
  109. #curve_item div {
  110.     background: #0F6;
  111.     position:absolute;
  112.     width:50px;
  113.     height:50px;
  114. }
  115. #curve_item #a { top:20px; left:20px; }
  116. #curve_item #b { top:100px; left:100px; }
  117. #curve_item #c { top:200px; left:200px; }
  118. #curve_item #d { top:300px; left:100px; }
  119. #curve_item #e { top:400px; left:20px; }
  120. </style>
  121. </head>
  122.  
  123. <body>
  124. <div id="curve_item">
  125.   <div id="a"></div>
  126.   <div id="b"></div>
  127.   <div id="c"></div>
  128.   <div id="d"></div>
  129.   <div id="e"></div>
  130. </div>
  131. </body>
  132. </html>

h5曲线滑动确认的更多相关文章

  1. IOS的H5页面滑动不流畅的问题：

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  2. 学习率设置&&训练模型之loss曲线滑动平均

    tensorflow中学习率.过拟合.滑动平均的学习 tensorflow中常用学习率更新策略 TensorFlow学习--学习率衰减/learning rate decay 分段常数衰减 分段常数衰 ...

  3. [one day one question] iphone6 plus h5页面滑动莫名卡

    问题描述: iphone6 plus h5页面滑动莫名卡,这怎么破? 解决方案: 比较奇葩的问题,在找不到任何问题的情况下,可以考虑在下发现的解决方案,html,body未添加height: 100% ...

  4. 微信H5手指滑动屏蔽微信的默认效果

    我们的H5页面放在微信上时,如果你向上滑动或者向下滑动屏幕时,会发现一些微信的特征,譬如:网页由www.baidu.com提供. 去掉这个微信的特征,代码如下: var f; n.addEventLi ...

  5. 移动端H5开发 (滑动事件)

    最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...

  6. selenium模拟H5触摸滑动之-TouchAction

    最近做移动端H5页面的自动化测试时候,需要模拟一些上拉,下滑的操作,最初考虑使用使用selenium ActionChains来模拟操作,但是ActionChains 只是针对PC端程序鼠标模拟的一系 ...

  7. inobounce.js : 禁止IOS H5的滑动回弹

    IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址 直接引入就行 & ...

  8. H5手指滑动切换卡片效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应

    Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...

随机推荐

  1. Notes:SVG(1)

    SVG,"Scalable Vector Graphics"可伸缩矢量图形,基于可扩展标记语言,用于描述二维矢量图形的一种图形格式. SVG是纯粹的XML,可以使用以下方法插入到H ...

  2. 谈谈JIT编译器和本机影像生成器（NGen.exe）

    前言 在看<CLR>的时候,作者在开篇的时候提到了NGen.exe,前面一节执行程序集的代码中提到:程序或方法执行前会执行MSCorEE.dll中的JIT函数把要执行方法的IL转换成本地的 ...

  3. 【Android】直播必备之YUV使用总结 —— Android常用的几种格式：NV21/NV12/YV12/YUV420P的区别

    说明 因工作方面接触到图像处理这一块,需要对手机摄像头采集的原始帧做Rotate或者Scale,但无奈对此的了解少之又少,于是网上搜了一顿,完事后将最近所学总结一下,以方便之后的人别踩太多坑. 首先想 ...

  4. knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

    Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例  ...

  5. jQuery-1.9.1源码分析系列（二）jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

  6. xml html entity 列表

    Name Character Unicode code point (decimal) Standard Description quot " U+0022 (34) XML 1.0 dou ...

  7. NPOI操作Excel辅助类

    /// <summary> /// NPOI操作excel辅助类 /// </summary> public static class NPOIHelper { #region ...

  8. 渡轮问题Ship

    题目描述 Palmia河从东往西流过Palmia国,把整个国家分成南北两半.河的两岸各有N个城市,北岸的每一个城市都与南岸的一个城市互为友好城市,而且任意两个北岸城市的友好城市都不相同.每一对友好城市 ...

  9. 查找html节点的方法

    document.firstChild document.documentElement(兼容性较好) 查找body节点的方法 document.firstChild.lastChild docume ...

  10. 房地产行业的商业智能BusinessIntelligence介绍

    商业智能(BI)的需求            随着企业信息化程度的深入,企业内部对获取决策信息的效率.正确性.全面性和准确度的要求也越来越高.但是,伴之而来的却是繁多的报表和信息孤岛的出现,同时由于各 ...