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实现表头固定效果的实例代码
May 24 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
js实现一键复制功能
Mar 16 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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 在线打包_支持子目录
2008/06/28 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
介绍一下grep命令的使用
2015/06/12 面试题
电台编导求职信
2014/05/06 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
现实表现证明材料
2015/06/19 职场文书
学校运动会感想
2015/08/10 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
JavaScript实现简单的音乐播放器
2022/08/14 Javascript