javascript实现滑动解锁功能

实现效果:

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实现滑动解锁功能

时间: 2014-12-30

纯JavaScript代码实现移动设备绘图解锁

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的

javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)

功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁.锁定后即使用户刷新页面,还是保留原来的状态.如已经锁定的,需要继续锁定,否则显示内容.   示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

C#实现打造气泡屏幕保护效果

本文主要是介绍C#实现打造气泡屏幕保护效果,首先说一下制作要点:1 窗口要全屏置顶 2 模拟气泡的滚动和粘滞效果 3 支持快捷键ESC退出 大致就是这3个要点了,其他还有一些细节我们在程序中根据需要再看,OK,开工! 首先是全屏置顶,因为是屏幕保护嘛,这个简单,在窗体的属性设置里把FormBorderStyle设置为none表示无边框,把ShowInTaskbar设置为false表示不在任务栏出现,最后一个把WindowState设置为Maximized表示最大化即可,当然可以设置TopMost

利用JavaScript在网页实现八数码启发式A*算法动画效果

最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的. 首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8, 移动空格,使得最后状态为有序,如下图 启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间. A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛

jQuery实现类似老虎机滚动抽奖效果

本文实例讲述了jQuery实现类似老虎机滚动抽奖效果.分享给大家供大家参考.具体如下: 这里使用jquery实现类似老虎机的网页抽奖功能,只是一个简单的投资功能实现,还有一些地方是需要完善的,比如抽奖快结束的时候,不会自动变慢速度,哪位高手感兴趣的话可以加以完善. 实现效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

基于JavaScript实现表单密码的隐藏和显示出来

为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class="pass-box"> <input type=&qu

JavaScript获取当前网页最后修改时间的方法

本文实例讲述了JavaScript获取当前网页最后修改时间的方法.分享给大家供大家参考.具体如下: 下面的JS代码输出当前网页最后修改时间,用到了document.lastModified属性 <!DOCTYPE html> <html> <body> This document was last modified on: <script> document.write(document.lastModified); </script> <

JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调

iOS仿邮箱大师的九宫格手势密码解锁

本文实例为大家分享了iOS手势密码解锁的相关代码,供大家参考,具体内容如下 // // LockView.m // 手势解锁 // // Created by Daniel on 16/4/4. // Copyright © 2016年 Daniel. All rights reserved. // #import "LockView.h" @interface LockView () /** 保存已选中的按钮 */ @property(nonatomic, strong) NSMut

JavaScript实现更改网页背景与字体颜色的方法

本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起

Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam