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

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>手机端触屏手指曲线滑动确认</title>

<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">

<script type="text/javascript">

var touch_screen = {

    //曲线滑动确认

    curve_confirm: {

        _object: null,

        _object_children_length: null,

        _object_children:null,

        _is_start: false,

        _fn: function() {},

        start: function() {

            var self = this;

            //开始滑动

            var start = function(e) {

                self._is_start = true;

                for (var i = 0, j = self._object_children_length; i < j; i++) {

                    var sub_object = self._object_children[i];

                    sub_object.setAttribute("alt", "");

                    sub_object.style.background = "";

                }

            }

            //滑动中

            var move = function(e) {

                e.preventDefault();

                var obj = self._object;

                if (self._is_start) {

                    var x = e.targetTouches[0].pageX;

                    var y = e.targetTouches[0].pageY;

                    for (var i = 0; i < self._object_children_length * 2; i++) {

                        var _o = obj.childNodes[i],

                            _w = _o.offsetWidth,

                            _h = _o.offsetHeight;

                        _left = _o.offsetLeft, _top = _o.offsetTop;

                        if (x >= _left && x < (_left + _w) && y > _top && y < (_top + _h)) {

                            var sub_object = obj.childNodes[i];

                            sub_object.setAttribute("alt", "yes");

                            sub_object.style.background = "#f00";

                        }

                    }

                }

            }

            //滑动结束时

            var end = function(e) {

                self._is_start = false;

                var n = 0;

                for (var i = 0, j = self._object_children_length; i < j; i++) {

                    var sub_object = self._object_children[i];

                    if (sub_object.getAttribute("alt") == "yes") {

                        n++;

                    }

                }

                if (n == self._object_children_length) {

                    n = 0;

                    if (typeof self._fn == "function") {

                        self._fn();

                    }

                }

            }

            document.addEventListener("touchstart", start, false);

            document.addEventListener("touchmove", move, false);

            document.addEventListener("touchend", end, false);

        },

        //初始化

        init: function(o, fn) {

            var class_clone = function(source) {

                var result = {};

                for (var key in source) {

                    result[key] = typeof source[key] === "object" ? class_clone(source[key]) : source[key];

                }

                return result;

            }

            var self = class_clone(touch_screen.curve_confirm);

            self._object = document.getElementById(o);

            self._object_children = self._object.getElementsByTagName("div");

            self._object_children_length = self._object_children.length;

            self._fn = fn;

            if (!self._object) {

                alert('bind_object is not an object');

                return false;

            }

            self.start();

        }

    }

}

//页面加载完成

window.onload = function() {

    touch_screen.curve_confirm.init("curve_item", function() {

        alert("曲线已匹配！");

    });

}

</script>

<style type="text/css">

html, body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #000;

}

#curve_item div {

    background: #0F6;

    position:absolute;

    width:50px;

    height:50px;

}

#curve_item #a { top:20px; left:20px; }

#curve_item #b { top:100px; left:100px; }

#curve_item #c { top:200px; left:200px; }

#curve_item #d { top:300px; left:100px; }

#curve_item #e { top:400px; left:20px; }

</style>

</head>

<body>

<div id="curve_item">

  <div id="a"></div>

  <div id="b"></div>

  <div id="c"></div>

  <div id="d"></div>

  <div id="e"></div>

</div>

</body>

</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. 【转】java中注解的使用与实例

    原文:http://www.cnblogs.com/pepcod/archive/2013/02/20/2918719.html java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单. ...

  2. MySQL学习笔记十一：数据导入与导出

    数据导入 1.mysqlimport命令行导入数据 在使用mysqlimport命令导入数据时,数据来源文件名要和目标表一致,不想改文件名的话,可以复制一份创建临时文件,示例如下. 建立一个文本use ...

  3. linux自定义系统调用

    1 Linux3.10.21内核系统调用设置 以前看的内核版本时2.6.11的,里面的系统调用设置一目了然啊!在文件entry.S中直接定义了sys_call_table表,并在这个文件中用各个系统调 ...

  4. 如何用 js 获取table 或者其他块状标签的 宽和高

    这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了.介绍两种方法.请看下面代码. 第一种 <script> function width_table_all() { ...

  5. iOS 使用EZAudio库生成wav出错的情况

    使用EZAudio库 录M4A格式可以参考该库例子中的代码. 录wav格式得改下源码.看下面的代码 AVAudioSession *session = [AVAudioSession sharedIn ...

  6. PJAX实现

    一.浏览器历史API 浏览器历史就像一堆卡片,如下所示:

  7. C语言 第六章 多重循环练习

    一.循环输入 #include "stdio.h" void main() { char c; do { printf("我告诉你1+1=2\n"); prin ...

  8. （九）WebGIS中的矢量查询（针对AGS和GeoServer）

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在第七章里我们知道了WebGIS中要素的本质是UICompo ...

  9. CentOS下VMware用桥接模式，静态ip上外网

    15年的时候,写过一篇博客:VMware中网络设置之Bridged  也是关于linux下vmware桥接模式.静态ip上外网的配置,不过当时更多的是用图形界面来实现的,通用性不强.生产环境,极少有l ...

  10. 7.3 数据注解特性之ConcurrencyCheck特性【Code-First系列】

    ConcurrencyCheck特性可以应用到领域类的属性中.当EF执行更新操作的时候,Code-First将列的值放在where条件语句中,你可以使用这个CurrencyCheck特性,使用已经存在 ...