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. 配置putty自动登陆服务器

    putty是一款知名的SSH工具,可以用来登陆linux服务器,提供了终端.SSH是secure Shell的缩写.我之前也有一篇文章介绍这个话题:http://www.cnblogs.com/che ...

  2. Linux异常表

    一.为什么需要异常表? 处于内核态的程序有下面四种情况会产生缺页异常: 1.内核试图访问属于进程地址空间的页,但是,该页对应的页框不存在或者内核试图去访问一个只读的页,分别对应“请求调页”和“写时复制 ...

  3. [OpenCV] Background subtraction

    不错的草稿.但进一步处理是必然的,也是难点所在. http://docs.opencv.org/master/d1/dc5/tutorial_background_subtraction.html#g ...

  4. C语言 基础练习40题

    一.题目 1.输入2个整数,求两数的平方和并输出. 2. 输入一个圆半径(r)当r>＝0时,计算并输出圆的面积和周长,否则,输出提示信息. 3.函数y=f(x)可表示为: 4.编写一个程序,从4 ...

  5. 相克军_Oracle体系_随堂笔记011-事物

    数据库主要实现的功能无非是以下三点: ①数据的一致性, ②数据的安全, ③数据的优化.   事物主要影响数据的一致性. 1.事务的基本概念    一组DML语句    insert.delete.up ...

  6. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

  7. 设置 LongListSelector 只有在项多的时候才分组

    Windows Phone 中的控件LongListSelector是一个很好的分组聚类控件,当列表中数据特别多的时候,LongListSelector就像字典中的目录,让我们很快定位到要找的数据. ...

  8. 细说Cookie

    阅读目录 开始 Cookie 概述 Cookie的写.读过程 使用Cookie保存复杂对象 Js中读写Cookie Cookie在Session中的应用 Cookie在身份验证中的应用 Cookie的 ...

  9. C#~异步编程再续~大叔所理解的并行编程(Task&Parallel)

    返回目录 并行这个概念出自.net4.5,它被封装在System.Threading.Tasks命名空间里,主要提供一些线程,异步的方法,或者说它是对之前Thread进行的二次封装,为的是让开发人员更 ...

  10. Entity Framework 代码先行

    一.什么是Code First 为了支持以设计为中心的开发流程,EF还更多地支持以代码为中心 (code-centric) ,我们称为代码优先的开发,代码优先的开发支持更加优美的开发流程,它允许你在不 ...