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. Repository 返回 IQueryable？还是 IEnumerable？

    这是一个很有意思的问题,我们一步一步来探讨,首先需要明确两个概念(来自 MSDN): IQueryable:提供对未指定数据类型的特定数据源的查询进行计算的功能. IEnumerable:公开枚举数, ...

  2. EntityFramework 7 如何查看执行的 SQL 代码？

    EF 其他版本:EntityFramework 如何查看执行的 SQL 代码? 在 EF7 中,并没有 Context.Database.Log 属性访问方式,但改变更加强大了,我们可以使用下面方式配 ...

  3. EF CodeFirst EntityTypeConfiguration 自关联映射配置

    实体示例代码: public class Message { public Message() { } public int ID { get; private set; } public strin ...

  4. SQL Server SQL性能优化之--数据库在“简单”参数化模式下，自动参数化SQL带来的问题

    数据库参数化的模式 数据库的参数化有两种方式,简单(simple)和强制(forced),默认的参数化默认是“简单”,简单模式下,如果每次发过来的SQL,除非完全一样,否则就重编译它(特殊情况会自动参 ...

  5. PHP获取网站图标（favicon.ico）文件

    有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...

  6. IIS与ASP.NET管道

    IIS 5.x与ASP.NET 我们先来看看IIS 5.x是如何处理基于ASP.NET资源(比如.aspx,.asmx等)请求的,整个过程基本上可以通过图1体现. IIS 5.x运行在进程InetIn ...

  7. php 简单权限管理实现

    权限管理介绍.与简单实现思想 权限管理 此函数为模块访问权限管理 实现思路为:根据传进来的权限值,进入不同的权限获取区间,然后根据模块名字判断是否有这个模块的访问权限 使用说明:在每一个模块开始之前调 ...

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

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

  9. 记一个简单的sql查询

    在我们做各类统计和各类报表的时候,会有各种各样的查询要求.条件 这篇主要记录一个常见的统计查询 要求如下: 统计一段时间内,每天注册人数,如果某天没有人注册则显示为0 现在建个简单的表来试试 建表语句 ...

  10. 【MVVM Light】新手初识MVVM，你一看就会

    一.前言 作为一个初入软件业的新手,各种设计模式与框架对我是眼花缭乱的.所以当我接触到这些新知识的时候就希望自己能总结几个步骤,以便更好更方便的在日常工作中进行使用. MVVM顾名思义就是Model- ...