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>
View Code
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: 0;top: 0;height: 100%;background-color: #7AC23C;z-index: 1;} #label{width: 46px;position: absolute;left: 0;top: 0;height: 40px;line-height: 38px;border: 1px solid #cccccc;background: #fff;z-index: 3;cursor: move;color: #ff9e77;font-size: 16px;font-weight: 900;} #labelTip{position: absolute;left: 0;width: 100%;height: 100%;font-size: 13px;font-family: 'Microsoft Yahei', serif;color: #787878;line-height: 38px;text-align: center;z-index: 2;} html, body, h1{margin: 0;padding: 0;} 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: "宋体";}
View Code
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||{});//$elmme.elm = $elm;//optsme.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;//successme.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);
View Code
转载于:https://www.cnblogs.com/liubingyjui/p/10577358.html
jQuery手机触屏拖动滑块验证跳转插件相关推荐
- jQuery手机触屏左右滑动切换栏目和焦点图
实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){TouchSlide({slideC ...
- c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
- python控制苹果手机触摸屏失灵怎么办_iPhone手机触屏不灵敏怎么办 触屏失灵乱跳等问题解决方法大全必看...
目前有很多的用户都正在使用苹果iphone iPhone触屏不灵敏怎么办 解决方法一. 解决方法二. 苹果手机触摸屏不灵敏的解决方法二是,强制重启:同时按住iPhone的电源和Home键并保持几秒钟, ...
- # 转:手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
转:手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明 项目中遇到触摸滑动的问题,在网上查找后,找到一个解决办法,再次记录一下,希望对大家有所帮助,该插件min ...
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明 最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是webkit,这就意味 ...
- jQuery拖动滑块验证样式
样式: 目录结构: HTML代码: <!DOCTYPE html> <html><head><title>jQuery仿淘宝网拖动滑块验证码代码< ...
- 手机触屏事件(jquery)
在移动端,点击事件和悬停事件都同统一为点击事件,所以对于手机或者带有触屏的电子设备来说,触屏事件不可忽视,当然,在不可触摸的屏幕上,这写事件就没有作用了. 触摸开始事件:touchstart 当手指放 ...
- 自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
最新文章
- C语言经典例61-杨辉三角
- Spring Boot OAuth 2.0 客户端
- 视图插入数据_数据库DQL、DML、DDL、DCL 详解
- hdu 1176 馅饼
- Android studio小问题解决
- 教你win10怎么设置环境变量
- [BZOJ1030] [JSOI2007] 文本生成器 (AC自动机 dp)
- 如何理解高并发中的协程?协程的实现和历史
- Open3d之点云上色
- 关于ThinkPHP框架项目在二级目录时,__PUBLIC__路径的问题
- 49.邮件模板的传值与调用
- ios 判断手机角度_iPhone那么贵,为什么电池还那么小呢?安卓手机电池都那么大了!...
- 刘逖:ETF市场迎来发展时机 可从产品创新等方面推动
- linux sybase 自动备份,sybase数据库 Linux环境下,每天定时全量备份+sybase数据库 stripe on 还原...
- 积分器-CD4066
- php的替换快捷键是什么,wps替换快捷键是什么
- 大数据“超能力”:数据安全和隐私该如何保障?
- 人脸识别概述及基于多显卡服务器实现百万底库人脸比对的简单实现方案
- 单点遥信发送表里一般都有什么变量啊?
- N76E003开发笔记(关于使用N76E003过程遇到的问题)