实现拼图滑动验证码代码样式
分类: 网页设计代码
发布: roger
浏览:
日期: 2020年11月18日
<!DOCTYPE html> <html> <head> <title>滑动拼图验证码</title> <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1582902_u0zm91pv15i.css"> <style type="text/css"> .verify-slide-con{ width: 360px; padding: 10px 20px; border: 1px solid #eee; } .img-con{ width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 1px solid #eee; position: relative; } .img-con > .slide-block{ top: 0; left: 0; position: absolute; height: 40px; width: 40px; display: none; background-repeat: no-repeat; background-attachment: scroll; background-size: 360px 200px; z-index: 10; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4); } .img-con > .slide-block-mask{ top: 0; left: 0; position: absolute; height: 40px; width: 40px; display: none; background-color: rgba(0, 0, 0, 0.4); } .img-con > .img{ width: 100%; height: 100%; } .img-con > .loading{ width: unset; height: unset; } .slide-con{ height: 40px; margin: 10px 0; position: relative; border: 1px solid #eee; } .slide-con > .slide-btn{ height: 40px; width: 40px; position: absolute; background: #4C98F7; display: flex; justify-content: center; align-items: center; cursor: pointer; } .icon-arrow-right{ font-size: 30px; color: #fff; } .operate-con{ border-top: 1px solid #eee; height: 30px; padding: 5px 0 0 5px; display: flex; align-items: center; } .icon-shuaxin1{ color: #777; font-size: 20px; cursor: pointer; } </style> </head> <body> <div class="verify-slide-con"> <div class="img-con"> <img class="img"> <div class="slide-block"></div> <div class="slide-block-mask"></div> </div> <div class="slide-con"> <div class="slide-btn"> <i class="iconfont icon-arrow-right"></i> </div> </div> <div class="operate-con"> <i id="refresh" class="iconfont icon-shuaxin1"></i> </div> </div> </body> <script type="text/javascript"> (function(){ var imgList = [ "http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg", "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg", "http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg", "http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg", ]; var imgCon = document.querySelector(".img-con"); var img = document.querySelector(".img-con > .img"); var slideBlock = document.querySelector(".img-con > .slide-block"); var slideBlockMask = document.querySelector(".img-con > .slide-block-mask"); var slideCon = document.querySelector(".slide-con"); var slideBtn = document.querySelector(".slide-con > .slide-btn"); var refreshBtn = document.querySelector("#refresh"); function randomInt(min=0, max=1) { return min + ~~((max-min)*Math.random()) } function initSlider(){ var maxTop = imgCon.offsetHeight - ~~(window.getComputedStyle(slideBlock).getPropertyValue("height").replace("px","")); var maxRight = imgCon.offsetWidth - ~~(window.getComputedStyle(slideBlock).getPropertyValue("width").replace("px","")); var randPosY = randomInt(0, maxTop); var randPosX = randomInt(60, maxRight); slideBtn.onmousedown = function(e){ slideBlock.style.display = "block"; slideBlock.style.top=`${randPosY}px`; slideBlock.style["background-position"] = `-${randPosX}px -${randPosY}px`; slideBlockMask.setAttribute("style", `display:block;top:${randPosY}px;left:${randPosX}px`); var edgeX = e.clientX; document.onmousemove = event => { var relativeX = event.clientX - edgeX; if(relativeX<0 || relativeX>imgCon.offsetWidth-this.offsetWidth) return void 0; slideBlock.style.left = relativeX + "px"; this.style.left = relativeX + "px"; } document.onmouseup = function() { this.onmousemove = null; this.onmouseup = null; if(Math.abs(slideBlock.offsetLeft - slideBlockMask.offsetLeft)<=2) alert("验证成功"); else alert("验证失败"); slideBlock.style.left = 0; slideBtn.style.left = 0; }; } } function switchImg(){ slideBlock.style.display = "none"; slideBlockMask.style.display = "none"; img.classList.add("loading"); img.src="https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"; var newSrc = imgList[randomInt(0, 4)]; var tmp = new Image(); tmp.src = newSrc; tmp.onload = function(){ img.classList.remove("loading"); img.src = newSrc; slideBlock.style["background-image"] = `url(${newSrc})`; initSlider(); } } (function(){ switchImg(); refreshBtn.addEventListener("click", e => switchImg()); })(); })(); </script> </html>
- 评论:(0)
发表评论 点击这里获取该日志的TrackBack引用地址