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. js 对闭包的理解

    <!DOCTYPE html> <html> <body> <p>局部变量计数.</p> <button type="but ...

  2. TCP ，UDP概念和TCP三次握手连接 的知识点总结

    OSI 计算机网络7层模型 TCP/IP四层网络模型 传输层提供应用间的逻辑通信(端到端),网络层提供的是主机到主机的通信,传输层提供的是可靠服务. TCP 中常说的握手指的是:连接的定义和连接的建立 ...

  3. 【Android】[转] Android Codec默认profile使用的是Baseline

    关于Android默认Codec使用的Profile找了半天没发现,还是Google的时候发现了开源中国有网友写的这边博客,相关的内容很少,便贴了过来做个笔记. 以下内容转自Android Media ...

  4. 在IIS下部署Thinkphp项目，验证码不能显示的解决办法

    由于公司租用的是虚拟空间,而且用的是IIS服务器,所以部署PHP的时候就出现很多问题:比如昨天就碰到这个问题:在IIS下部署Thinkphp项目,验证码不能显示 这是生成验证码的方法: // 制作专门 ...

  5. C# decimal保留指定的小数位数，不四舍五入

    decimal保留指定位数小数的时候,.NET自带的方法都是四舍五入的. 项目中遇到分摊金额的情况,最后一条的金额=总金额-已经分摊金额的和. 这样可能导致最后一条分摊的时候是负数,所以自己写了一个保 ...

  6. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  7. ZHA profile与ZLL profile的一个例子

    ZHA Coordinator 如何控制ZLL Light/Philips Hue Light 缩写: ZHA: ZigBee Home Automation profile ZLL:  ZigBee ...

  8. python征程3.0（python对象）

    1.python使用对象模型来存储数据.构造任何类型的值都是一个对象.”尽管python被当成一种面向对象的脚本的编程语言“,但你完全能够写出不使用任何类和实例的脚本. python对象都拥有三个特性 ...

  9. jsp读取properties文件

    jsp读取properties文件 jsp中读取properties文件,并把值设到js变量中: mpi.properties文件内容: MerchantID=00000820 CustomerEMa ...

  10. 常用C#关键字详解教程

    很多在学习网站后台的同学都对C#的关键字有些摸不到头脑,现在就和大家一起学习一下这些关键字的含义 类型 Void 用作方法的返回类型时,void 关键字指定方法不返回值. 在方法的参数列表中不允许使用 ...