JS完成滑动拼图验证功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>      <title>滑块验证</title>    
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<!-- 解决在h5页面中ie兼容模式页面显示异常 --><meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">	  	</head>  <style type="text/css">.slide-box{display: block;position: relative;
}
.slide-img-block{display:none;position: absolute;top: -124px;left: 0;right: 0;
}
.slide-box:hover .slide-img-block{display:block;} .scroll-background{background-image: url("./images/images/sprite.3.2.0.png");background-repeat: no-repeat;
}
.scroll-bar{width: 400px;height: 38px;position: relative;margin: 0 0 10px 0;border: 1px solid #e4e7eb;background: #f7f9fa;/* border-radius: 18px; */
}
.slide-btn{height: 44px;width: 44px;background-position: 0 -84px;cursor: pointer;display: block;position: absolute;left: -4px;top: -3px;-moz-box-shadow: none;box-shadow: none;border-radius: 13px;z-index: 399;
}
.slide-title{cursor: default;font-size: 14px;color: #486c80;opacity: 1;filter: alpha(opacity=100);line-height: 39px;text-align: center;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;
}
.slide-img-div{width: 400px;height: 300px;position: relative;border: 1px solid #eaeaea;
}
.slide-img-div img{width: 100%;height: 100%;
}
.slide-bottom-refresh{cursor: pointer;background: url("./images/images/refreshBtn.png") no-repeat center top;background-size: 100%;height: 34px;width: 34px;position: absolute;top: 0;right: 0;
}
.slide-bottom-refresh:hover{background:url("./images/images/refreshBtn2.png") no-repeat center top;background-size: 100%;}.slide-box-shadow{display: none;position: absolute;width: 40px;height: 40px;border-radius: 4px;background-color: rgba(0, 0, 0, 0.2);box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) inset;
}
.slide-block{opacity: 0;position: absolute;top: 0;left: 2px;width: 40px;height: 40px;border-radius: 4px;background-repeat: no-repeat;background-attachment: scroll;border: 1px solid rgba(255, 255, 0, 0.8);background-size: 400px 300px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4);box-sizing: border-box;z-index: 10;
}
.slide-img-nopadding{position: relative;width: 100%;height: 100%;    
}
.slide-icon{float: left;height: 22px;width: 26px;
}
.slide-img-hint{-webkit-font-smoothing: subpixel-antialiased;font-size: 12px !important;line-height: 22px !important;margin: 0 auto;position: relative;
}
.slide-text{text-align: left !important;color: #4b3f33;
}
.slide-img-hint-info{height: 22px;width: 100%;background:#ddf4fd;height: 0;overflow: hidden;position: absolute;bottom: 0;transition: height 0.3s;z-index: 11;
}
.redColor{color: red;
}
.greenColor{color: green;
}.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=88); } .white_content { display: none; position: absolute; top: 20%; left: 20%; width: 50%; height: 50%; padding: 20px; border: 0px solid white; /* background-color: white;  */z-index:1002; overflow: auto; } </style><script type="text/javascript" src="/jsoa/ui/js/jquery-1.11.1.min.js"></script><script type="text/javascript">(function (window, document) {var SliderBar = function (targetDom, options) {// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  if (!(this instanceof SliderBar)) return new SliderBar(targetDom, options);// 参数this.options = this.extend({dataList: []}, options);// 获取domthis.targetDom = document.getElementById(targetDom);var dataList = this.options.dataList;if (dataList.length > 0) {var html = "<div class='slide-box'>" +"<div class='slide-loading'></div><div class='slide-img-border'>" +"<div class='slide-img-div'>" +"<div class='slide-img-nopadding'><img class='slide-img' id='slideImg' src='' />" +"<div class='slide-block' id='slideBlock'></div><div class='slide-box-shadow' id='cutBlock'></div></div>" +"<div class='scroll-background slide-bottom-refresh' id='refreshBtn' title='更换图片'></div>" +"<div class='scroll-background  slide-img-hint-info' id='slideHintInfo'>" +"<div class='slide-img-hint'><div class='scroll-background slide-icon' id='slideIcon'></div>" +"<div class='slide-text'><span class='slide-text-type' id='slideType'></span>" +"<span class='slide-text-content' id='slideContent'></span></div></div></div></div>" +"</div></div>" +"<div class='scroll-background scroll-bar'>" +"<div class='scroll-background slide-btn' id='slideBtn'></div>" +"<div class='slide-title' id='slideHint'> <-按住滑块，拖动完成上面拼图</div></div></div>";this.targetDom.innerHTML = html;this.slideBtn = document.getElementById("slideBtn");                 // 拖拽按钮this.refreshBtn = document.getElementById("refreshBtn");             // 换图按钮this.slideHint = document.getElementById("slideHint");               // 提示名称this.slideImg = document.getElementById("slideImg");                 // 图片this.cutBlock = document.getElementById("cutBlock");                 // 裁剪区域this.slideBlock = document.getElementById("slideBlock");             // 裁剪的图片this.slideIcon = document.getElementById("slideIcon");               // 正确、失败的图标this.slideType = document.getElementById("slideType");               // 正确、失败this.slideContent = document.getElementById("slideContent");         // 正确、失败的正文this.slideHintInfo = document.getElementById("slideHintInfo");       // 弹出this.resultX = 0;this.startX = 0;this.timer = 0;this.startTamp = 0;this.endTamp = 0;this.x = 0;this.imgWidth = 0;this.imgHeight = 0;this.imgList = [];this.isSuccess = true;for (var i = 1; i < 10; i++) {this.imgList.push(i + ".jpg");}}this.init();}SliderBar.prototype = {init: function () {this.event();},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},event: function () {var _this = this;_this.reToNewImg();_this.slideBtn.onmousedown = function(event){_this.mousedown(_this, event);} _this.refreshBtn.onclick = function(){_this.refreshBtnClick(_this);}},refreshBtnClick: function(_this){_this.isSuccess = true;_this.slideBlock.style.cssText = "";_this.cutBlock.style.cssText = "";_this.reToNewImg();},reToNewImg: function () {var _this = this;var index = Math.round(Math.random() * 8);         // 该方法有等于0 的情况var imgSrc = "./images/images/" + _this.imgList[index] + "";_this.slideImg.setAttribute("src", imgSrc);_this.slideBlock.style.backgroundImage = "url("+ imgSrc +")";_this.slideImg.onload = function (e) {e.stopPropagation();_this.imgWidth = _this.slideImg.offsetWidth;                   // 图片宽_this.imgHeight = _this.slideImg.offsetHeight;                 // 图片高}},cutImg: function () {var _this = this;_this.cutBlock.style.display = "block";var cutWidth = _this.cutBlock.offsetWidth;                // 裁剪区域宽var cutHeight = _this.cutBlock.offsetHeight;              // 裁剪区域高if(_this.imgWidth == 0){_this.imgWidth =  Math.floor((Math.random()*100)+200);}if(_this.imgHeight == 0){_this.imgHeight = Math.floor((Math.random()*100)+25);}// left _this.resultX = Math.floor(Math.random() * (_this.imgWidth - cutWidth * 2 - 4) + cutWidth);// topvar cutTop = Math.floor(Math.random() * (_this.imgHeight - cutHeight * 2) + cutHeight);// 设置样式_this.cutBlock.style.cssText = "top:" + cutTop + "px;" + "left:" + _this.resultX + "px; display: block;";_this.slideBlock.style.top = cutTop + "px";_this.slideBlock.style.backgroundPosition = "-" + _this.resultX + "px -" + cutTop + "px";_this.slideBlock.style.opacity = "1";},mousedown: function (_this, e) {e.preventDefault();_this.startX = e.clientX;_this.startTamp = (new Date()).valueOf();var target = e.target;target.style.backgroundPosition = "0 -216px";_this.slideHint.style.opacity = "0";if(_this.isSuccess){_this.cutImg();}document.addEventListener('mousemove', mousemove);document.addEventListener('mouseup', mouseup);// 拖拽function mousemove(event) {_this.x = event.clientX - _this.startX;if (_this.x < 0) {_this.slideBtn.style.left = "-4px";_this.slideBlock.style.left = "2px";} else if (_this.x >= 0 && _this.x <= 360) {_this.slideBtn.style.left = _this.x + "px";_this.slideBlock.style.left = _this.x + "px";} else {_this.slideBtn.style.left = "360px";_this.slideBlock.style.left = "360px";}_this.slideBtn.style.transition = "none";_this.slideBlock.style.transition = "none";};// 鼠标放开function mouseup() {document.removeEventListener('mousemove', mousemove);document.removeEventListener('mouseup', mouseup);var left = _this.slideBlock.style.left;left = parseInt(left.substring(0, left.length-2));if(_this.resultX > (left - 2) && _this.resultX < (left + 2)){_this.isSuccess = true;_this.endTamp = (new Date()).valueOf();_this.timer = ((_this.endTamp - _this.startTamp) / 1000).toFixed(1);//如果成功合上的时间不在规则内if( _this.timer < 0.5 || _this.timer >10){_this.isSuccess = false;// 设置样式// 裁剪图片(拼图的一块)_this.slideBlock.style.left = "2px";_this.slideBlock.style.transition = "left 0.6s";  //滑块移动的时间// 错误弹出的图标_this.slideIcon.style.backgroundPosition = "0 -1229px";_this.slideType.className = "slide-text-type redColor";_this.slideType.innerHTML = "验证失败:";_this.slideContent.innerHTML = "再试一次,拼的比上次再快一点";_this.options.fail&&_this.options.fail();} else {// 裁剪图片(拼图的一块)_this.slideBlock.style.opacity = "0";_this.slideBlock.style.transition = "opacity 0.6s";// 裁剪的区域(黑黑的那一块)_this.cutBlock.style.opacity = "0";_this.cutBlock.style.left = "2px";_this.cutBlock.style.transition = "opacity 0.6s";// 正确弹出的图标_this.slideIcon.style.backgroundPosition = "0 -1207px";_this.slideType.className = "slide-text-type greenColor";_this.slideType.innerHTML = "验证通过:";_this.slideContent.innerHTML = "用时" + _this.timer + "s";setTimeout(function(){_this.cutBlock.style.display = "none";_this.slideBlock.style.left = "2px";_this.reToNewImg();}, 600);_this.options.success&&_this.options.success();}}else{_this.isSuccess = false;// 设置样式// 裁剪图片(拼图的一块)_this.slideBlock.style.left = "2px";_this.slideBlock.style.transition = "left 0.6s";// 裁剪的区域(黑黑的那一块)_this.cutBlock.style.opacity = "0";_this.cutBlock.style.left = "2px";_this.cutBlock.style.transition = "opacity 0.6s";// 错误弹出的图标_this.slideIcon.style.backgroundPosition = "0 -1229px";_this.slideType.className = "slide-text-type redColor";_this.slideType.innerHTML = "验证失败:";_this.slideContent.innerHTML = "拖动滑块将悬浮图像正确拼合";setTimeout(function(){_this.cutBlock.style.display = "block";_this.slideBlock.style.left = "2px";_this.reToNewImg();_this.cutImg();}, 600);_this.options.fail&&_this.options.fail();}// 设置样式_this.slideHintInfo.style.height = "22px";setTimeout(function(){_this.slideHintInfo.style.height = "0px";}, 2000);_this.slideBtn.style.backgroundPosition = "0 -84px";_this.slideBtn.style.left = "-4px";_this.slideBtn.style.transition = "left 0.6s";_this.slideHint.style.opacity = "1";}}}window.SliderBar = SliderBar;
}(window, document));</script><body><div id="slideBar" ></div></body> <script type="text/javascript">/*** 关闭弹框*/$(function(){//滑块  var dataList = ["0","1"];var options = {dataList: dataList,success:function(){  console.log(options);two();},fail: function(){return;}};SliderBar("slideBar", options);});<%-- var dataList = ["0","1"];var options = {dataList: dataList,success:function(){  console.log("show");/* closeLayer(); *//* window.close(); */two();window.opener.location.href="/jsoa/retrievePassword.jsp?cid="+<%=msg%>;window.location.href="/jsoa/retrievePassword.jsp?cid="+<%=msg%>;  },fail: function(){console.log("fail");  }};SliderBar("slideBar", options); --%></script></body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

系统思考：善用系统的“内功”，警惕系统的“报复”。
之前有看到一个有趣的故事，其实也是系统思考。1967年，罗马尼亚认为需要增加本国人口，于是出台了一项粗暴的政策，禁止45岁以下妇女流产。很快，出生率就增加了两倍。但过了一段时期以后，出生率又回落到原来的水平。此外，由于大量危险的非法流产，育龄妇女的死亡率较之前增…...
2024/4/27 8:39:35
item_search_pro - 高级关键字搜索淘宝商品 API
q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter= ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200525100717761.png?x-oss-process=im…...
2024/4/29 18:06:14
iOS多线程系列之二： NSThread
第二部分 NSThread 先看一段API文档的描述 An NSThread object controls a thread of execution. Use this class when you want to have an Objective-C method run in its own thread of execution. Threads are especially useful when you need to perform a lengthy task,…...
2024/4/16 21:43:00
python 14——网络编程入门
网络编程入门计算机网络基础计算机网络是独立自主的计算机互联而成的系统的总称，组建计算机网络最主要的目的是实现多台计算机之间的通信和资源共享。今天计算机网络中的设备和计算机网络的用户已经多得不可计数，而计算机网络也可以称得上是一个“复杂巨系统”，对于这样的系…...
2024/4/24 16:28:43
（正能靠爆棚）社会安全生存手册，好好生活很重要！！！
版权归作者所有，任何形式转载请联系作者。作者：肥猫MOTO（来自豆瓣）来源：https://www.douban.com/note/355709166/ 写这些东西，完全是心血来潮，因为每个人的生活轨迹都不一样。面对这个浮躁的社会，和近期各种匪夷所思的伤害事件，就觉得这个年代已经不实在单纯了。我们…...
2024/4/16 21:42:54
磨刀不误砍柴工，OpenStack核心服务详解（上）
前言本文主要介绍了OpenStack的界面管理、认证管理和镜像管理。 OpenStack操作界面管理 OpenStack操作界面服务Horizon提供基于Web的控制界面，是云管理员和用户能够管理各种OpenStack资源和服务。从Horizon着手学习OpenStack，快速了解OpenStack全貌，为学习OpenStack技术细…...
2024/4/16 21:42:54
gitlib上传项目
gitlib怎么上传整个项目吶具体步骤如下：打开本地项目，初始化gitgit init将本地git和服务器上的连接（确保项目没有其他远程连接的服务器端口）git remote add origin这里是gitlab上刚创建的项目文件的地址链接（origin后面空格跟上想要提交的仓库地址）添加要提交的本地项…...
2024/5/1 16:10:14
每天学一点Thinking in java: 16 静态数据初始化
静态数据初始化无论创建多少对象，static都只有那么一片存储空间。不能对本地变量使用static关键字，只能对字段使用。如果静态的字段是原始类型（primitive）且没有被初始化，则该静态字段获得该类型的标准初始值。如果是某个对象的句柄，则默认初始值是null。正常初始化，和…...
2024/4/16 21:42:54
10 Scala 数据结构(上)-集合
数据结构(上)-集合文章目录数据结构(上)-集合1. Scala 集合基本介绍2. 不可变集合继承层次一览图3. 可变集合继承层次一览图4. 定长数组4.1 定义数组5. 变长数组5.1 用法5.2 小结5.3 定长数组与变长数组的转换5.4 多维数组6. Scala 数组与 Java 的 List 的互转6.1 Scala 数组转…...
2024/4/16 21:43:00
css 适配
1、小于某个宽度时固定 @media screen and (max-width:1372px){body{min-width: 1344px;} } 2、移动端适配 @media screen and (min-width:321px) and (max-width:375px){html,body {font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html,body …...
2024/4/26 4:56:04
记录第一次写python(查找日志里重复的条码数量)
这个python的代码，是用来查找日志里，记录的条码的重复数量。 #!/usr/bin/python # -*- coding: UTF-8 -*-#目前的字典会自动过滤【时间】完全一致的数据，需要注意import datetime import os import sys import mathreload(sys) sys.setdefaultencoding(utf8)def view_bar(In…...
2024/4/16 21:42:54
项目开源库以及资源链接
各个图片资源文件地址，后期可能会有不同的主题色主图标库：https://www.iconfont.cn/collections/detail?cid=18456精选线性图标库：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16957大量线性图标库：https://www.iconfon…...
2024/4/16 21:43:36
JavaWeb---过滤器Filter
前言过滤器和我们生活中净水器可以说是一个道理的，就是用来过滤网站的数据。 1. Filter Filter : 过滤器，用来过滤网站的数据生活中的应用：处理中文乱码, 登录验证…[1] 我们客户端发送请求时，可能带有一些中文字符，这时候服务器响应相关信息时，就得先进行过滤，让编…...
2024/4/24 6:55:00
进程间的通信方式
程间通信（IPC，Interprocess communication）是一组编程接口，让程序员能够协调不同的进程，使之能在一个操作系统里同时运行，并相互传递、交换信息。这里总结下，进程间的通信方式有：1、管道2、信号量3、消息队列4、共享内存5、Socket1、管道1）普通管道( pipe )：管道是一…...
2024/4/24 6:55:06
毕设日志-在家办公记录
第一周1、ConstraintLayout中，可以通过app:layout_constraintDimensionRatio="W,828:1125”来设置ImageView的宽高比，且自适应屏幕2、Mac系统，AndroidStudio连接MuMu模拟器最近在家办公，没有真机调试，只好使用模拟器，然而AndroidStudio自带的模拟器实在垃圾，卡顿，…...
2024/4/24 6:54:58
反射型XSS—漏洞
反射型XSS—漏洞原理：利用javascript语句，进行XSS拼接网页的HTML代码，一般而言我们是可以拼接出合适的HTML代码去执行恶意的JS语句（总结：xss就是拼接恶意的HTML) 1.我们输入 <script>alert(1)</script>在框内寻找输出点，发现在源代码里找到了两个输出点，但…...
2024/4/30 12:20:15
面试题目：常见算法
待整理...
2024/4/24 6:54:56
MySQL学习笔记--初识数据库
数据库：就是数据的仓库，存储数据的数据库分类：关系型数据库（SQL）：类似Excel MySQL , Oracle , Sql Server , DB2 , SQLlite 通过表和表之间，行和列之间的关系进行数据的存储（考勤表，学员信息表等）。非关系型数据库（NoSQL，Not Only SQL）：键值对，{key：value} …...
2024/4/24 6:54:54
Oozie逻辑调度执行多个Job
Oozie逻辑调度执行多个Job目标：使用Oozie执行多个Job调度分步执行：解压官方案例模板 [atguigu@hadoop102 oozie-4.0.0-cdh5.3.6]$ tar -zxf oozie-examples.tar.gz编写脚本 [atguigu@hadoop102 oozie-4.0.0-cdh5.3.6]$ vi oozie-apps/shell/p2.sh内容如下：#!/bin/bash/bin/d…...
2024/4/24 6:55:00
学习笔记-代码存在主要问题
ts的优点 1.约束正确的约束可以使数据流中的错误减少 2.推导正确的推倒可以简化代码 1.确定数据结构并且规定到一起 2.通过参数约束，返回值约束等将数据流类型规定出来如何更好的利用ts+vscode方便写代码如何更好利用ts推导 trigger suggest trigger parameter hint 多用小…...
2024/4/24 6:55:02

JS完成滑动拼图验证功能

相关文章

最新文章