javascript实现滑动解锁功能


Posted in Javascript onDecember 31, 2014

实现效果:

javascript实现滑动解锁功能

css样式代码略。

html代码:

页面上导入了jquery.mobile 、jquery

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<div id="pageSlide">

                        <input type="hidden" value="" id="captcha"/>

 

                        <div id="slider" class="slider">

                            <span id="label" class="label"></span>

                            <span id="lableTip">Slide to confirm I am human!</span>

                        </div>

                    </div>

 js代码:

<script type="text/javascript">

        window.onload = function () {

            var slider1 = new Slider();

            slider1.Init();

            ///屏幕大小发生改变时触发

            $(window).resize(function () {

                slider1.HanderIn();

                slider1.HanderOut();

            });

        }

        //滑动条对象

        function Slider(swipestart, min, max, index, IsOk, lableIndex) {

            var _self = this;

            //是否开始滑动

            _self.swipestart = swipestart;

            //最小值

            _self.min = min;

            //最大值

            _self.max = max;

            //当前滑动条所处的位置

            _self.index = index;

            //是否滑动成功

            _self.IsOk = IsOk;

            //鼠标在滑动按钮的位置

            _self.lableIndex = lableIndex;

        }

        //初始化

        Slider.prototype.Init = function () {

            var _self = this;

            $("#label").on("mousedown", function (event) {

                var e = event || window.event;

                _self.lableIndex = e.clientX - this.offsetLeft;

                _self.HanderIn();

            });

            $("#pageSlide").on("mousemove", function (event) {

                _self.HanderMove(event);

            });

            $(document).on("mouseup", function (event) {

                _self.HanderOut();

            });

            $("#label").on("touchstart", function (event) {

                var e = event || window.event;

                _self.lableIndex = e.originalEvent.pageX - this.offsetLeft;

                _self.HanderIn();

            });

            $("#pageSlide").on("touchmove", function (event) {

                _self.HanderMove(event, "mobile");

            });

            $(document).on("touchend", function (event) {

                _self.HanderOut();

            });

        }

        //鼠标/手指接触滑动按钮

        Slider.prototype.HanderIn = function () {

            var _self = this;

            _self.swipestart = true;

            _self.min = 0;

            _self.max = $("#slider").width();

        }

        //鼠标/手指移出

        Slider.prototype.HanderOut = function () {

            var _self = this;

            //停止

            _self.swipestart = false;

            _self.Move();

        }

        //鼠标/手指移动

        Slider.prototype.HanderMove = function (event, type) {

            var _self = this;

            if (_self.swipestart) {

                event.preventDefault();

                var event = event || window.event;

                if (type == "mobile") {

                    _self.index = event.originalEvent.pageX - _self.lableIndex;

                } else {

                    _self.index = event.clientX - _self.lableIndex;

                }

                _self.Move();

            }

        }

        //鼠标/手指移出

        Slider.prototype.Move = function () {

            var _self = this;

            $(".warn").text("index:" + _self.index + ", max" + _self.max + ",lableIndex:" + _self.lableIndex + ",value:" + $("#captcha").val() + " date:" + new Date().getUTCDate());

            if ((_self.index + 20) >= _self.max) {

                _self.index = _self.max - 20;

            }

            if (_self.index < 0) {

                _self.index = _self.min;

            }

            $(".label").css("left", _self.index + "px");

            if (_self.index == (_self.max - 20)) {

                //停止

                _self.swipestart = false;

                _self.IsOk = true;//解锁

                $("#captcha").val(1);

                var style = {"filter": "alpha(opacity=1)",

                    "-moz-opacity": "1", "opacity": "1"}

                $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);

                $("#slider").css("background-color", "#E5EE9F");

                $("#lableTip").text("Thank You!");

            } else {

                _self.IsOk = false;//未解锁

                $("#captcha").val(0);

                var style = { "filter": "alpha(opacity=0.2)",

                    "-moz-opacity": "0.2", "opacity": "0.2"}

                $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);

                $("#slider").css("background-color", "#FDEB9C");

                $("#lableTip").text("Slide to confirm I am human!");

            }

        }

    </script>

效果实现:

javascript实现滑动解锁功能

Javascript 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
JavaScript中number转换成string介绍
Dec 31 #Javascript
JavaScript中string转换成number介绍
Dec 31 #Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 #Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 #Javascript
javascript 事件处理示例分享
Dec 31 #Javascript
JavaScript中的变量作用域介绍
Dec 31 #Javascript
JavaScript中的变量定义与储存介绍
Dec 31 #Javascript
You might like
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python数据库小程序源代码
2019/09/15 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
幼儿园数学教学反思
2014/02/02 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
对Golang中的FORM相关字段理解
2021/05/02 Golang
使用golang编写一个并发工作队列
2021/05/08 Golang
详解Python中的进程和线程
2021/06/23 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers