jQuery手机触屏拖动滑块验证跳转插件

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

<title>jQuery手机触屏拖动滑块验证跳转插件</title>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link type="text/css" rel="stylesheet" href="css/slide-unlock.css">

</head>

<body>

<div id="demo">

    <div id="slider">

        <div id="slider_bg"></div>

        <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>

    </div>

</div>    

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

<script type="text/javascript" src="js/jquery.slideunlock.js"></script>

<script>

$(function () {

    var slider = new SliderUnlock("#slider",{

            successLabelTip : "验证成功"

        },function(){

            alert("验证成功,即将跳转至素材火");

            window.location.href="https://www.sucaihuo.com";

            //以下四行设置恢复初始，不需要可以删除

            setTimeout(function(){

                $("#labelTip").html("拖动滑块验证");

                $("#labelTip").css("color","#787878");

                },2000);

            slider.init();

        });

    slider.init();

})

</script>

</body>

</html>

CSS：

#slider{margin: 100px auto;width: 300px;height: 40px;position: relative;border-radius: 20px;background-color: #dae2d0;overflow: hidden;text-align: center;user-select: none;-moz-user-select: none;-webkit-user-select: none;}

#slider_bg{position: absolute;left:;top:;height: 100%;background-color: #7AC23C;z-index:;}

#label{width: 46px;position: absolute;left:;top:;height: 40px;line-height: 38px;border: 1px solid #cccccc;background: #fff;z-index:;cursor: move;color: #ff9e77;font-size: 16px;font-weight:;}

#labelTip{position: absolute;left:;width: 100%;height: 100%;font-size: 13px;font-family: 'Microsoft Yahei', serif;color: #787878;line-height: 38px;text-align: center;z-index:;}

html, body, h1{margin:;padding:;}

body{background-color: #151515;color: #d5d4ff;overflow: hidden;}

#demo{width: 600px;margin: 150px auto;padding: 10px;border: 0px dashed #d5d4ff;border-radius: 10px;text-align: left;}

#label{font-family: "宋体";}

jquery.slideunlock.js：

/**

 * jquery plugin -- jquery.slideunlock.js

 * Description: a slideunlock plugin based on jQuery

 * Version: 1.1

 * Author: Dong Yuhao

 * created: March 27, 2016

 */

;(function ($,window,document,undefined) {

    function SliderUnlock(elm, options, success){

        var me = this;

        var $elm = me.checkElm(elm) ? $(elm) : $;

        success = me.checkFn(success) ? success : function(){};

        var opts = {

            successLabelTip:  "Successfully Verified",

            duration:  200,

            swipestart:  false,

            min:  0,

            max:  $elm.width(),

            index:  0,

            IsOk:  false,

            lableIndex:  0

        };

        opts = $.extend(opts, options||{});

        //$elm

        me.elm = $elm;

        //opts

        me.opts = opts;

        //是否开始滑动

        me.swipestart = opts.swipestart;

        //最小值

        me.min = opts.min;

        //最大值

        me.max = opts.max;

        //当前滑动条所处的位置

        me.index = opts.index;

        //是否滑动成功

        me.isOk = opts.isOk;

        //滑块宽度

        me.labelWidth = me.elm.find('#label').width();

        //滑块背景

        me.sliderBg = me.elm.find('#slider_bg');

        //鼠标在滑动按钮的位置

        me.lableIndex = opts.lableIndex;

        //success

        me.success = success;

    }

    SliderUnlock.prototype.init = function () {

        var me = this;

        me.updateView();

        me.elm.find("#label").on("mousedown", function (event) {

            var e = event || window.event;

            me.lableIndex = e.clientX - this.offsetLeft;

            me.handerIn();

        }).on("mousemove", function (event) {

            me.handerMove(event);

        }).on("mouseup", function (event) {

            me.handerOut();

        }).on("mouseout", function (event) {

            me.handerOut();

        }).on("touchstart", function (event) {

            var e = event || window.event;

            me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;

            me.handerIn();

        }).on("touchmove", function (event) {

            me.handerMove(event, "mobile");

        }).on("touchend", function (event) {

            me.handerOut();

        });

    };

    /**

     * 鼠标/手指接触滑动按钮

     */

    SliderUnlock.prototype.handerIn = function () {

        var me = this;

        me.swipestart = true;

        me.min = 0;

        me.max = me.elm.width();

    };

    /**

     * 鼠标/手指移出

     */

    SliderUnlock.prototype.handerOut = function () {

        var me = this;

        //停止

        me.swipestart = false;

        //me.move();

        if (me.index < me.max) {

            me.reset();

        }

    };

    /**

     * 鼠标/手指移动

     * @param event

     * @param type

     */

    SliderUnlock.prototype.handerMove = function (event, type) {

        var me = this;

        if (me.swipestart) {

            event.preventDefault();

            event = event || window.event;

            if (type == "mobile") {

                me.index = event.originalEvent.touches[0].pageX - me.lableIndex;

            } else {

                me.index = event.clientX - me.lableIndex;

            }

            me.move();

        }

    };

    /**

     * 鼠标/手指移动过程

     */

    SliderUnlock.prototype.move = function () {

        var me = this;

        if ((me.index + me.labelWidth) >= me.max) {

            me.index = me.max - me.labelWidth;

            //停止

            me.swipestart = false;

            //解锁

            me.isOk = true;

        }

        if (me.index < 0) {

            me.index = me.min;

            //未解锁

            me.isOk = false;

        }

        if (me.index+me.labelWidth == me.max && me.max > 0 && me.isOk) {

            //解锁默认操作

            $('#label').unbind().next('#labelTip').

            text(me.opts.successLabelTip).css({'color': '#fff'});

            me.success();

        }

        me.updateView();

    };

    /**

     * 更新视图

     */

    SliderUnlock.prototype.updateView = function () {

        var me = this;

        me.sliderBg.css('width', me.index);

        me.elm.find("#label").css("left", me.index + "px")

    };

    /**

     * 重置slide的起点

     */

    SliderUnlock.prototype.reset = function () {

        var me = this;

        me.index = 0;

        me.sliderBg .animate({'width':0},me.opts.duration);

        me.elm.find("#label").animate({left: me.index}, me.opts.duration)

            .next("#lableTip").animate({opacity: 1}, me.opts.duration);

        me.updateView();

    };

    /**

     * 检测元素是否存在

     * @param elm

     * @returns {boolean}

     */

    SliderUnlock.prototype.checkElm = function (elm) {

        if($(elm).length > 0){

            return true;

        }else{

            throw "this element does not exist.";

        }

    };

    /**

     * 检测传入参数是否是function

     * @param fn

     * @returns {boolean}

     */

    SliderUnlock.prototype.checkFn = function (fn) {

        if(typeof fn === "function"){

            return true;

        }else{

            throw "the param is not a function.";

        }

    };

    window['SliderUnlock'] = SliderUnlock;

})(jQuery, window, document);

jQuery手机触屏拖动滑块验证跳转插件的更多相关文章

jQuery手机触屏左右滑动切换焦点图特效代码
原文地址:http://www.17sucai.com/pins/4857.html 演示地址:http://www.17sucai.com/pins/demoshow/4857 干净演示地址:htt ...
jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
HTML5学习总结-09 拖放和手机触屏事件
一拖放拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...
js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"&gt ...
手机触屏滑动图片切换插件swiper&period;js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
第145天：jQuery&period;touchSlider触屏满屏左右滚动幻灯片
1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装代码如下: <!DOCTYPE html> <htm ...
手机触屏的js事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // ...

随机推荐

AlertDialog错误
Unable to add window token null is not for an application AlertDialog.Builder localBuilder = new Ale ...
phpstudy的apache端口没有被占用，也有vc9，防火墙也没开，也开杀毒软件，就是无法启动apache
我电脑装了一个独立的apche和一个phpstudy的apache,我学习是教学视频是php5.2而phpstudy刚好支持. 但是我在选取phpstudy的php版本5.3n以上就无法启动apach ...
番外特别篇之为什么我不建议你直接使用UIImage传值&quest;--从一个诡异的相册九图连读崩溃bug谈起
关于"番外特别篇" 所谓"番外特别篇",就是系列文章更新期间内,随机插入的一篇文章.目前我正在更新的系列文章是实现iOS图片等资源文件的热更新化.但是,这两天 ...
ejs-mate
安装 npm install ejs-mate --save 模板方法: 1.layout 2.partial 3.block
tomcat直接访问
解决了:http://blog.csdn.net/zhangyulin54321/article/details/8876320 <Context path="" docBa ...
C++&commat;子类类型转换为父类类型
static_cast(*this) to a base class create a temporary copy. class Window { // base class public: vir ...
FileReader 基本介绍
转自:http://blog.csdn.net/zk437092645/article/details/8745647 用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步 ...
netlink+netfilter
http://blog.chinaunix.net/uid-21768364-id-3618377.html
&period;net 中HttpClient 携带cookie传输
CookieContainer cookieContainer = new CookieContainer(); Cookie cookie = new Cookie("username&q ...
教你ASP&period;NET中如何防止注入攻击
你应该在程序中验证所有的不信任输入.你应该假定所有的用户输入都是非法的.用户可以在应用程序中提供表单字段,查询字串,客户端cookies和浏览器环境值比如用户代理字串和IP地址等. 弱输入校验通常为注 ...