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"> ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 第145天：jQuery.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: // ...
随机推荐
- 解决CSDN需要登录才能看全文
本来今天学习遇到一些问题,在网上翻着博客,突然在csdn里就提示要登录才能看全文. 看了下页面源码博客内容已经拿到本地了,只是加了一层罩,也是挺无语的,暂时先用这种方法解决吧: (function() ...
- Python异常处理总结
一.何谓异常处理 在我们调试程序时,经常不可避免地出现意料之外的情况,导致程序不得不停止运行,然后提示大堆提示信息,大多是这种情况都是由异常引起的.异常的出现一方面是因为写代码时粗心导致的语法错误,这 ...
- Effective C++ 第0章 explicit构造函数
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
- 关于取li中的value
HTML的li标签的属性value是有规定的:规定列表项目的数字,所以它的value只能是数字.像字符和第一数字为0的都不取非要用li的话可以 var uid = $('#userid').attr( ...
- idea 连接redis 出现 Caused by: java.net.SocketTimeoutException: connect timed out
Exception in thread "main" redis.clients.jedis.exceptions.JedisConnectionException: java.n ...
- SpringBoot：Invalid character found in method name. HTTP method names must be tokens
问题背景 关于SpringBoot应用挂了很久之后,会发生Invalid character found in method name. HTTP method names must be token ...
- MySQL中怎么对varchar类型排序问题（转）
在mysql默认order by 只对数字与日期类型可以排序,但对于varchar字符型类型排序好像没有用了,下面我来给各位同学介绍varchar类型排序问题如何解决. 今天在对国家电话号码表进行 ...
- Git学习指北
learnGitBranching:一个可视化学习 git 的网站 learngitbranching.js.org,虽然项目有些悠久,如果学习 git 的话可以来玩下
- Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误
1.全局配置 在application.java文件添加CorsRegistry配置 package com.ypnh.authority; import com.ypnh.authority.inf ...
- oracle wm_concat 函数无法使用的情况下，使用LISTAGG（）函数
http://dacoolbaby.iteye.com/blog/1698957 --20180327 重写wm_concat函数,解决行数超过上限问题 /*执行前请将APPS替换为当前登录用户*/ ...