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入门学习书籍推荐
Jun 12 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
python使用PyFetion来发送短信的例子
2014/04/22 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
心理健康心得体会
2014/01/02 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
个人自我鉴定总结
2014/03/25 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
道歉短信大全
2015/05/12 职场文书
《海上日出》教学反思
2016/02/23 职场文书