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: // ...
随机推荐
- day22 面向对象
面向对象 ''''1.面向过程编程 核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么 基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 ...
- eplan图框制作
1. 首先,新建一个原理图项目 2. 新建图框.选择“工具”→“主数据”→“图框”→“新建” 在“文件名”中输入文件名,保存. 3.添加新建图框属性选项.选中“新建符号*”,添加选项 4. 设置图框的 ...
- Python发送邮件脚本
import smtplib from email.mime.text import MIMEText mailserver = "smtp.163.com" username_s ...
- c#使用资源文件完成国际化
路径结构如下 namespace UnitTestProject1 { [TestClass] public class UnitTest1 { [TestMethod] public void Te ...
- ES6 Promise 用法讲解
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- Flutter绘制波浪
以上动画是仿照 里面的物理动画还未仿写 代码见 https://github.com/dnoyeb/syk_flutter
- MySQL 的数据目录
MySQL里面有4个数据库是属于MySQL自带的系统数据库: mysql 这个数据库贼核心,它存储了MySQL的用户账户和权限信息,一些存储过程.事件的定义信息,一些运行过程中产生的日志信息,一些帮助 ...
- Linux学习之路1
root用户 安装初始系统默认没有启动root用户,如下方式启动: l sudo passwd l 连续输入两次密码,启动root用户 l 再登陆 登陆root用户 l su root l ...
- ios端阻止页面滚动露底
转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一 ...
- HDU1754-ZKW线段树
单点更新,区间最值 HDU 1754 // // Created by helica on 2018/3/18. // //zkw线段树 单点修改 区间求最值 //HDU 1754 #include ...