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 delete 使用示例代码
Mar 29 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
原生js封装运动框架的示例讲解
Oct 01 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
layui 表格操作列按钮动态显示的实现方法
Sep 06 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python中的日期时间处理详解
2016/11/17 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
js实现自动锁屏功能
2021/06/02 Javascript