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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JavaScript函数基础详解
Feb 03 Javascript
js实现产品缩略图效果
Mar 10 Javascript
JavaScript基础之this详解
Jun 04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
js实现继承的5种方式
2015/12/01 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
express启用https使用小记
2019/05/21 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
浅谈Python中的闭包
2015/07/08 Python
python发送邮件功能实现代码
2016/07/15 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
有趣的广告词
2014/03/18 职场文书
投标承诺函范文
2015/01/21 职场文书
职代会闭幕词
2015/01/28 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python