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. hdu4833 Best Financing（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4833 这道题目关键的思想是从后往前dp,dp[i]表示在第i处投资xi能获得的最大收益,其中xi表示从 ...

  2. unbuntu14.04 安装nginx配置

    记录一下linux下安装nginx的所需要的配置. 首先从 nginx官网 下载所需要的版本,复制链接,执行 wget http://nginx.org/download/nginx-1.8.0.ta ...

  3. HP-UX 11g RAC安装 记录

    环境:HP-UX 11.31 + GI 11.2.0.4 + Oracle 11.2.0.4 背景:本文只对HP-UX平台安装11g RAC环境过程中,针对一些跟Linux平台有差异的地方进行简单记录 ...

  4. Cesium应用篇：3控件（2）BaseLayerPicker

    所有范例均在github中搜索:ExamplesforCesium BaseLayerPicker控件非常简单,似乎没什么可说的,确实非常的简单,但作为一个底图选择控件,可以说是最基本的一个控件. C ...

  5. ASP.NET实现微信功能（1）（创建菜单，验证，给菜单添加事件）

    LZ实在 不知道怎么起名字了,索性就取了这个名字,开始吧,说实在的,想给自己的平常的学习做一个总结,总是忘了总结.也只能给工作做一个总结了. 我打算用2篇文章来写,第一篇是关于订阅号的,就是这个号,另 ...

  6. Java类初始化

    Java类初始化 成员变量的初始化和构造器 如果类的成员变量在定义时没有进行显示的初始化赋值,Java会给每个成员变量一个默认值 对于  char.short.byte.int.long.float. ...

  7. VS2015 打开html 提示 未能完成操作 解决办法

    删除%LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache下所有文件,然后重启VS. 快捷键:Win + R,输入 %LocalA ...

  8. Competing Consumers Pattern （竞争消费者模式）

    Enable multiple concurrent consumers to process messages received on the same messaging channel. Thi ...

  9. shell调用函数返回值深入分析

    编写shell脚本过程中,我们经常会自定义一些函数,并根据函数的返回值不同来执行相应的流程,那么我们如何来获取函数的返回值呢? 首先shell中调用函数有两种方式: 第一种:value=`functi ...

  10. 分享一个UI与业务逻辑分层的框架(三)

    序言 前两篇讲解了UIMediator框架的使用及具体原理代码.本篇讲述MediatorManager的实现代码及展望. MediatorManager MediatorManager的作用有两点: ...