js鼠标拖动图片拼图完成验证

这里就是创建两个块一个为白色的背景随机位置显示，一个从白色块的位置大小获取他的背景图片，初始y坐标与白色块相同，鼠标按下拖拽按钮隐藏的块显示并随拖拽按钮移动，比对它与白色块的位置。就是拖拽原理
html代码

<div class="minbtn"><a href="javascript:void(0)"><i></i><span>图片不好看? 换一张!</span></a></div>

这里就是刷新按钮，其余的都是js动态添加上去的
css代码

* {    margin: 0;    padding: 0;    outline: none;
}
/* 大盒子 */
#box {    width: 300px;    height: 300px;    margin: 0 auto;    border: 1px solid #ADADAD;    border-radius: 15px;    box-shadow: 1px 1px 1px #ADADAD;    text-align: center;    position: relative;
}
/* 提示文字 标题 */
#box h3 {    padding: 10px 0;
}
/* 图片 */
#box .img {    width: 280px;    height: 200px;    margin: 0 auto;    position: relative;
}
#box .img img {    width: 100%;    height: 100%;
}
/* 缺失的图片 */
#box .img .kuai {    width: 50px;    height: 50px;    background-image: url(../img/1.jpg);    background-repeat: no-repeat;    background-size: 280px 200px;    left: 0;    position: absolute;    opacity: 0;    z-index: 10;
}
/* 缺失的空白 */
#box .img .kuai2 {    top: 10px;    left: 100px;    position: absolute;    width: 50px;    height: 50px;    background-color: white;
}
/* 滑动 */
#box .slider {    width: 280px;    height: 30px;    margin: 10px auto;    background-color: #DDDDDD;    border-radius: 10px;    position: relative;
}
/* 已滑动的宽度 */
#box .slider .ming {    width: 0px;    height: 30px;    margin: 10px auto;    background-color: skyblue;    top: -10px;    left: 0;    border-radius: 10px;    position: absolute;    color: white;    font-weight: bold;    line-height: 30px;
}
/* 滑动按钮 */
#box .slider button {    z-index: 20;    width: 45px;    height: 45px;    position: absolute;    left: 0;    top: -8px;    background: white url(../img/yz.png) no-repeat;    background-size: 100%;    border-radius: 50%;    border: 0;
}
/* 更换图片按钮 */
.minbtn {    width: 300px;    height: 50px;    margin: 30px auto;    text-align: center;    overflow: hidden;    line-height: 50px;}
.minbtn a{    display: flex;    line-height: 30px;    text-decoration: none;    text-indent: 1em;    color: blueviolet;    font-weight: bold;
}
.minbtn a>i{    width: 30px;    height: 30px;    border-radius: 50%;    background: url(../img/sx.png) no-repeat;    background-size: 100%;
}

js代码

//dom操作封装
function query(html){    return document.querySelector(html);
}
function imgver(){    // 渲染数据    // 创建大盒子    var bigbox = document.createElement("div");    bigbox.id = "box";    // 追加元素    bigbox.innerHTML='<h3 class="msgtxt">请完成图片验证</h3>'+'<div class="img">'+'<img src="img/t1.png" alt="..." id="tu">'+    '<div class="kuai"></div>'+'<div class="kuai2"></div></div>'+    '<div class="slider"><div class="ming"></div><button type="button" id="btn"></button></div>'    document.body.appendChild(bigbox);        var box = query("#box");// 获取大盒子    var imgbox = query(".img");// 获取图片盒子    var btn = query("#btn");// 获取按钮    var img = query(".kuai"); //获取空缺图片    var que = query(".kuai2"); //获取空缺    var slider = query(".slider"); //获取拖拽进度    var msgtxt = query(".msgtxt");//获取验证信息    var tu = query("#tu"); //获取图片    // 创建图片数组    var arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg","img/6.jpg"];    var ming = query(".ming"); //获取已拖拽的长度    return tag.verify(arr, box, imgbox, btn, img, que, slider, msgtxt,tu,ming) //调用方法
}
// 验证操作
var tag = {    //滑动验证码方法    verify: function(arr, box, imgbox, btn, img, que, slider, msgtxt,tu,ming) {        // 随机图片        var atu = arr[Math.floor(Math.random() * (arr.length))]        tu.src = atu;        img.style.backgroundImage = " url(" + atu + ")";        // 计算图片空白的部分        var tap = imgbox.offsetHeight - img.offsetHeight;        // 空白随机出现的位置        var left = Math.random() * (imgbox.offsetWidth - img.offsetWidth - imgbox.offsetWidth / 2) + imgbox.offsetWidth /2;        var tops = Math.random() * (tap);        img.style.top = tops + "px";        // 缺口出现的位置        que.style.top = tops + "px";        que.style.left = left + "px";        // 截取缺失的背景图片        img.style.backgroundPositionY = -tops + "px";               img.style.backgroundPositionX = -left + "px";        // 鼠标在按钮按下，不提起，出发onmousedown事件 btn.onmousedown = function() {            // 鼠标按下之前清除掉后面设置            img.style.opacity = "1"            que.style.opacity = "1"            ming.innerHTM = "";            msgtxt.innerHTML="拖动图片完成验证";            slider.onmousemove = function(event) {//鼠标移动事件 当slider按下出发此事件 让slider可移动                // 获取坐标                var zuo = event.clientX - box.offsetLeft - slider.offsetLeft;                if (zuo > slider.offsetWidth) {//判断超出                    zuo = slider.offsetWidth - img.offsetWidth / 2 }                btn.style.left = zuo + "px";                img.style.left = zuo + "px";               ming.style.width = zuo + 10 + "px"            }        }        // 鼠标提起事件        box.onmouseup = function() {            // 正确的坐标            var yes = que.offsetLeft - img.offsetLeft            slider.onmousemove = null; //关闭移动事件            if (yes < 10 && yes > -10) { //偏差不超过+-10，成功               msgtxt.innerHTML = "验证成功√"               ming.innerHTML = "验证成功"                msgtxt.style.color = "chartreuse"                img.style.opacity = "0";                que.style.opacity = "0";                return "yes"            }else{ //验证失败，把它回到起始位置                msgtxt.innerHTML = "验证失败X"                ming.innerHTML = ""                msgtxt.style.color = "red";                zuo = 0                btn.style.left = zuo + "px";                img.style.left = zuo + "px";                ming.style.width = zuo + "px"            }           }    }
}
// 调用方法
imgver();
// 刷新按钮
var sxbtn = document.querySelector(".minbtn a");
sxbtn.onclick = function(){    location.reload();
}

js鼠标拖动图片拼图完成验证相关推荐

基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
Unity3D 鼠标拖动和旋转物体以及鼠标拖动图片
1.鼠标拖动物体Cube using System.Collections; using System.Collections.Generic; using UnityEngine; using Un ...
Unity UGUI实现鼠标拖动图片
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
html js 鼠标移动图片跟着移动
<html><head><meta charset="utf-8" /><title>实现在指定区域内图片随着鼠标的移动移动< ...
as3用鼠标拖动图形拼图——灰常简单的教程
话说这种效果在课件里面经常用到,鼠标拖动事件,一个运用很频繁的事件,一起学习学习吧首先SWF贡献给大家看看效果感觉咋样,原理其实还蛮简单的,做做试试吧下面来看看源码吧 package { imp ...
js鼠标拖动元素移动
拖动元素移动 var odiv = document.getElementsByTagName('div')[0];//给需要移动的元素添加onmousedown事件odiv.onmousedown ...
html 禁止拖动图片,禁止鼠标拖动图片在新窗口打开
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name,parameters) 其中: pageU ...
css3 局部放大,CSS3/JS 鼠标悬停图片局部放大动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 $('.tile') // tile mouse actions .on('mouseover', func ...
java拖动图片拼图_求教，我的这个拼图程序中的移动图片的改怎么做
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 public class button extends JPanel implements MouseListener, ActionListener { ...

js鼠标拖动图片拼图完成验证

js鼠标拖动图片拼图完成验证相关推荐

最新文章

热门文章