<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>滑动解锁</title>

    <style>

        *{

            margin:0;

            padding: 0;

            box-sizing: border-box;

            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -khtml-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }

        .outer{

            position: relative;

            margin:20px auto;

            width: 200px;

            height: 30px;

            line-height: 28px;

            border:1px solid #ccc;

            background: #ccc9c9;

        }

        .outer span,.filter-box,.inner{

            position: absolute;

            top: 0;

            left: 0;

        }

        .outer span{

            display: block;

            padding:0  0 0 36px;

            width: 100%;

            height: 100%;

            color: #fff;

            text-align: center;

        }

        .filter-box{

            width: 0;

            height: 100%;

            background: green;

            z-index: 9;

        }

        .outer.act span{

            padding:0 36px 0 0;

        }

        .inner{

            width: 36px;

            height: 28px;

            text-align: center;

            background: #fff;

            cursor: pointer;

            font-family: "宋体";

            z-index: 10;

            font-weight: bold;

            color: #929292;

        }

        .outer.act .inner{

            color: green;

        }

        .outer.act span{

            z-index: 99;

        }

    </style>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script>

        $(function(){

            $(".inner").mousedown(function(e){

                var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box");

                $(document).mousemove(function(e){

                    dx = e.pageX - os.left;

                    if(dx<0){

                        dx=0;

                    }else if(dx>162){

                        dx=162

                    }

                    $filter.css('width',dx);

                    el.css("left",dx);

                });

                $(document).mouseup(function(e){

                    $(document).off('mousemove');

                    dx = e.pageX - os.left;

                    if(dx<162){

                        dx=0;

                        $span.html("滑动解锁");

                    }else if(dx>=162){

                        dx=162;

                        $(".outer").addClass("act");

                        $span.html("验证通过！");

                        el.html('&radic;')

                    }

                    $filter.css('width',dx);

                    el.css("left",dx)

                })

            })

        })

    </script>

</head>

<body>

    <div class="outer">

        <div class="filter-box"></div>

        <span>

            滑动解锁

        </span>

        <div class="inner">&gt;&gt;</div>

    </div>

</body>

</html>

jq实现简单的滑动解锁效果的更多相关文章

  1. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  2. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  3. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  4. javascript简单的滑动效果

    利用setInterval实现简单的滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  6. Swift: 打造滑动解锁文字动画

    原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...

  7. Android实现滑动刻度尺效果，选择身高体重和生日

    刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈…… 最近群里的开发人员咨询怎样实现刻度 ...

  8. Android UI效果实现——Activity滑动退出效果

    更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况 ...

  9. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

  1. android studio不能预览

    错误:Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge : Unsupported major.minor versi ...

  2. linux shell学习-1

    今天在使用$()这个命令的时候,如下,一直纳闷为何输出不是 "/usr": 一直在不断换着法子来试,原来是$()会将每个执行的命令单独隔开来的,及时是嵌套的命令,也会在执行逻辑上单 ...

  3. &&和||的操作符妙用(javascript)

    前言 &&逻辑与和||逻辑或,它们既可以返回一个布尔值,又可以返回指定操作数的值,这个值是非布尔型的. MDN api参考 Section1 布尔运算 首先,我们明确一下基础知识. 能 ...

  4. [转]使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【八】——Web Api的安全性

    本文转自:http://www.cnblogs.com/fzrain/p/3552423.html 系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html ...

  5. 腾讯云安全组，实现服务器外网ip访问网站

    添加访问地ip出入站规则HTTP,并将云主机添加到安全组中.

  6. 【原】Spring和Dubbo基于XML配置整合过程

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只需一个 ...

  7. 【SSH网上商城项目实战26】完成订单支付后的短信发送功能

     转自: https://blog.csdn.net/eson_15/article/details/51475431 上一节我们使用了Java mail完成了给买家发送邮件的功能,还遗留一个功能,就 ...

  8. 分析解决 spring quartz 中出现的执行两次问题

    1. 问题描述 在开发询盘功能时,遇到一个需求,就是后台定时任务执行用电施工业务的工单下发. 使用的技术是 spring quartz,因为其他应用有先例,配置quartz 完成后,先写了一个 hel ...

  9. Tempter of the Bone 搜索---奇偶性剪枝

    Tempter of the Bone Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) ...

  10. UGUI——重写Image类实现进度条

    目的: 游戏中经常会用到进度条,但是美术给的图片用filled一拉伸就很难看,如下图 第一种模式是九宫格模式,第二种是filled.而我们需要的是两种可结合的. 如何实现: 新建一个类,继承image ...