JS实现图片拖动验证

目录结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>原生js实现图片拖动验证</title><link rel="stylesheet" type="text/css" href="css/imgyz.css"/></head><body><div class="minbtn"><button type="button"></button><span>图片不好看? &nbsp; 换一张吧!</span></div></body><script type="text/javascript" src="js/imgyz.js"></script><script type="text/javascript">imgver();var sxbtn=document.querySelector(".minbtn button");sxbtn.onclick=function(){location.reload();}</script>
</html>

* {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/01.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 button {width: 30px;height: 30px;border-radius: 50%;background: url(../img/sx.png) no-repeat;background-size: 100%;border: 0;float: left;
}
.minbtn span {line-height: 30px;float: left;height: 100%;text-indent: 1em;color: blueviolet;font-weight: bold;
}


//dom操作封装
function query(html){return document.querySelector(html)}var tag = {//滑动验证码方法verify: function(arr, box, imgbox, btn, img, que, slider, btit,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 lef=imgbox.offsetWidth-img.offsetWidth;var left = Math.random() * (imgbox.offsetWidth - img.offsetWidth - imgbox.offsetWidth / 2) + imgbox.offsetWidth /2;console.log(left)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";console.log(img.style.top)btn.onmousedown = function() {img.style.opacity = "1"que.style.opacity = "1"ming.innerHTML="";btit.innerHTML="拖动图片完成验证";slider.onmousemove = function(event) {console.log(event.offsetX);var zuo = event.clientX - box.offsetLeft - slider.offsetLeft;console.log(zuo)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.offsetLeftconsole.log(yes)slider.onmousemove = nullif (yes < 10 && yes > -10) {btit.innerHTML = "验证成功√"ming.innerHTML="验证成功"btit.style.color = "chartreuse"img.style.opacity = "0";que.style.opacity = "0";return "yes"}else{btit.innerHTML = "验证失败X"ming.innerHTML=""btit.style.color = "red";zuo=0btn.style.left = zuo + "px";img.style.left = zuo + "px";ming.style.width=zuo+"px"}}}}function imgver(){var bigbox=document.createElement("div");bigbox.id="box";bigbox.innerHTML='<h3 class="btit">请完成图片验证</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 btit = query(".btit");var tu = query("#tu");var arr = ["img/t1.png", "img/t2.png", "img/t3.png", "img/t4.png", "img/t5.png"];var ming=query(".ming");return tag.verify(arr, box, imgbox, btn, img, que, slider, btit,tu,ming)}

JS实现图片拖动验证相关推荐

html滑动验证图片,js实现移动端图片滑块验证功能
之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canv ...
html四张图片拼图,js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: Document 向右滑动验证 css: *{ margin: 0; padding: 0; } ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...
拖动验证（前端+后端）
按照自己的思路写了一个拖动验证,不知道别人是不是这样写的,我觉得方法应该差不多.不废话,上代码. <?phprequire_once 'Check.php';if($data = Check:: ...
js原生图片拼图Demo
自从找着了工作后已经有将近三个月没有写博客啦.最近在加强js的逻辑练习,所以收集了一些js小练习,手把手把它敲出来了.我把它记录下来,我的学习分享,嘿嘿... 贴下界面: 图一界面这个拼图游戏主 ...
html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切
众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键 οncοntextmenu="return false" 禁止 ...
JS针对图片加载及404处理
前言网站运营久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间 ...
php免费人机验证,Antiboter是一个界面漂亮且方便使用的PHP后台的图片人机验证
Antiboter PHP-HTML版本 Antiboter是一个界面漂亮且方便使用的PHP后台的图片人机验证 Antiboter不依赖于任何前端框架 (不需要导入jQure,react或者boots ...
Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...

JS实现图片拖动验证

目录结构

JS实现图片拖动验证相关推荐

最新文章

热门文章