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: // ...
随机推荐
- (win10 docker desktop) docker build 时 alpine 无法安装软件问题的解决
使用 alpine 作为 docker 基础镜像时,运行 apk add ..... 遇到如下错误: WARNING: Ignoring http://dl-cdn.alpinelinux.org/a ...
- Linux云计算运维-MySQL
0.建初心 优秀DBA的素质 1.人品,不做某些事情2.严谨,运行命令前深思熟虑,三思而后行,即使是依据select3.细心,严格按照步骤一步一步执行,减少出错4.心态,遇到灾难,首先要稳住,不慌张, ...
- golang 实现HTTP代理和反向代理
正向代理 package main import ( "fmt" "io" "net" "net/http" " ...
- 第一次java作业
学习了c语言半个学期,好像刚开始并不担心Java,因为Java也是类同于C语言的一种语言,可是Java学到现在也将近一个月,在我脑子里现在却还没有一个框架,有点着急了.
- 是时候理解下HTTPS的原理及流程了
1.什么是HTTP协议? HTTP协议是Hyper Text Transfer Protocol(超文本传输协议),位于TCP/IP模型当中的应用层.HTTP协议通过请求/响应的方式,在客户端和服务端 ...
- 使用axios 的post请求下载文件，
axios({ method: 'post', data: param, responseType:'blob', url: _urls + '/Downloaddata' }).then(data= ...
- Python----多元线性回归
多元线性回归 1.多元线性回归方程和简单线性回归方程类似,不同的是由于因变量个数的增加,求取参数的个数也相应增加,推导和求取过程也不一样.. y=β0+β1x1+β2x2+ ... +βpxp+ε 对 ...
- ios之库Protobuf的使用
https://blog.csdn.net/dangbai01_/article/details/81099001 (1)Protobuf是什么? Protobuf 即 google protocol ...
- Spring项目定时任务
最近某协会网站有个需求:显示当天访问量,很明显需要做俩步:一个是访问请求量的显示,一个需要每天00点恢复访问次数为0 所以需要做个定时任务:每天00点更新: 注解用法Spring配置: 1.在spri ...
- pytorch错误：RuntimeError: received 0 items of ancdata解决
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com RuntimeError: received 0 items of ancdata错误是在datalo ...