襄阳网站建设首选公司哪家好,wordpress+采集小说,wordpress用还得shopif好用,同心食品厂网站建设项目任务分解这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 前言 不知各位朋友现在在web端进行登录的时候有没有注意一个变化#xff0c;以前登录的时候是直接账号密码通过就可以直接登录#xff0c;再后来图形验证码#xff0c;数字结果运算验证#xff0c… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 前言 不知各位朋友现在在web端进行登录的时候有没有注意一个变化以前登录的时候是直接账号密码通过就可以直接登录再后来图形验证码数字结果运算验证到现在的拼图验证。这一系列的转变都是为了防止机器操作但对于我们来说有亿点麻烦但也没办法呀。 今天我们也一起来做一个制造亿点麻烦的人实现一个拼图验证。 实现原理 这个实现原理并不复杂我们只需要一张图作为我们的拼接素材我们再单独弄一个盒子然后移动它到我们的指定位置到达指定范围内即验证通过反之验证未通过。 既然原理我们知道了那我们就开干吧。 实现前端登录拼图验证 本篇文章以 css 为主 javascript为辅实现。 搭建框架 我们要实现这个功能我们需要先搭建出来一个框架。 // cssstyle.check{width: 400px;height: 300px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://img0.baidu.com/it/u2028084904,3939052004fm253fmtautoapp138fJPEG?w889h500);}
/style// htmldiv classcheck/div我们画出来后它就长下面图这样。 添加被校验区域及校验区域 我们需要添加一个被校验的区域及校验区域用来做我们的校验像下图这两个东西。 这里我们使用伪类来实现这两个区域。 校验区域 .check::before{content: ;width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);border: 1px solid #fff;position: absolute;top: 100px;left: 280px;}这样一个校验区域就做好了。 被校验区域 这里我们需要使用到background-position根据我们的校验区域大小进行切出我们的被校验区域。 background-image和background-repeat我们直接继承background-position设置为校验区域的坐标位置(也就是距离top和left的距离)我们将background-size图片大小设为原盒子的大小。这样我们就得到了校验区域的那一片区域也就是我们的被校验区域了。 .check-child{content: ;width: 50px;height: 50px;border: 1px solid #fff;background-image: inherit;background-repeat: inherit;background-size: 400px 300px;background-position: -280px -100px;position: absolute;top: 100px;left: 10px;}// html!-- 被校验区域 --div classcheck-child/div添加拖动条 这里我们两个区域都添加完了我们需要添加一个拖动条。 我们先添加一个拖动区域。 // css.drag{width: 400px;height: 50px;background-color: #e3e3e3;margin-top: 10px;position: relative;}// htmldiv classdrag/div现在拖动区域有了我们需要在拖动区域内添加一个可拖动的盒子及操作说明不然看起来交互效果不友好。 添加可拖动的盒子及交互说明 我们添加一个可以拖动的盒子。 // css.drag-child{width: 50px;height: 50px;background-color: aquamarine;z-index: 10;position: absolute;top: 0;left: 0;}// html!-- 可拖动的盒子 --div classdrag-child/div为了我们友好的交互我们在拖动区域内给他添加操作说明。 // css.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;}// html!-- 可拖动的盒子 --div classdrag-tipsspan按住左边按钮向右拖动完成上方图像验证/span/div拖动条动起来 这一步我们需要让我们的拖动盒子动起来让他可以在拖动区域内随意的左右拖动。 // 获取元素实例const drag document.querySelector(.drag-child)// 声明鼠标按下事件const dragMouseDown event {// 添加鼠标移动事件document.addEventListener(mousemove, dragMouseMove)}// 监听鼠标移动事件const dragMouseMove event {// 获取当前 x 轴坐标const { offsetX } eventif(offsetX 0 || offsetX 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${offsetX}px)}// 结束鼠标监听事件const dragMouseUP event {// 移除鼠标移动事件document.removeEventListener(mousemove, dragMouseMove)}// 添加鼠标按下事件document.addEventListener(mousedown, dragMouseDown)// 添加鼠标弹起事件document.addEventListener(mouseup, dragMouseUP)现在我们的盒子就可以正常的拖动了但现在它还有几个问题我们后面来解决。 提示文字会被选中在拖动区域内拖动会闪烁 联动被校验区域 我们先让被校验区域跟着我们的拖动动起来。 // 图形校验const check document.querySelector(.check-child)// 修改被校验区域坐标check.style.left ${offsetX}px这样我们的被校验区域就能够跟着动了我们声明一个方法用来表示通过校验的回调。 // 通过校验回调const success () {console.log(通过校验);}// 监听鼠标移动事件const dragMouseMove event {// 获取当前 x 轴坐标const { offsetX } eventif(offsetX 0 || offsetX 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${offsetX}px)// 修改被校验区域坐标check.style.transform translateX(${offsetX}px)if(offsetX 278 offsetX 285){// 执行回调success()}}添加交互动画 这里我们在鼠标移出监听的时候添加一个动画当当前未通过校验的时候我们给他还原到初始位置。 keyframes move {to {transform: translateX(0);}
}// 结束鼠标监听事件const dragMouseUP event {// 移除鼠标移动事件document.removeEventListener(mousemove, dragMouseMove)// 获取当前 x 轴坐标const { offsetX } eventif(offsetX 278 || offsetX 285){// 修改可移动盒子的 x 轴坐标drag.style.animation move 0.5s ease-in-out// 修改被校验区域坐标check.style.animation move 0.5s ease-in-out// 动画结束监听回调const animationEnd (){// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${0}px)// 修改被校验区域坐标check.style.transform translateX(${0}px)// 清除动画属性drag.style.animation check.style.animation // 移出动画结束监听document.removeEventListener(animationend, animationEnd)}// 添加动画结束监听document.addEventListener(animationend, animationEnd)}}当我们未通过校验且放开鼠标的时候它就会自动回到初始位置。 解决遗留问题 1、 提示文字会被选中 我们在提示文字的样式中添加user-select: none;禁用掉文字选择。 /* 提示文字说明 */.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;user-select: none;z-index: 1;position: absolute;top: 0;left: 0;}2、 在拖动区域内拖动会闪烁 我们将我们刚刚使用的offsetX改为pageX。这里需要注意一下边距偏移量的问题哦。 // 监听鼠标移动事件const dragMouseMove event {console.log(event);// 获取当前 x 轴坐标const { pageX } eventif(pageX 0 || pageX 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${pageX}px)// 修改被校验区域坐标check.style.transform translateX(${pageX}px)if(pageX 278 pageX 285){// 执行回调success()}}// 结束鼠标监听事件const dragMouseUP event {// 移除鼠标移动事件document.removeEventListener(mousemove, dragMouseMove)// 获取当前 x 轴坐标const { pageX } eventif(pageX 278 || pageX 285){// 修改可移动盒子的 x 轴坐标drag.style.animation move 0.5s ease-in-out// 修改被校验区域坐标check.style.animation move 0.5s ease-in-out// 动画结束监听回调const animationEnd (){// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${0}px)// 修改被校验区域坐标check.style.transform translateX(${0}px)// 清除动画属性drag.style.animation check.style.animation // 移出动画结束监听document.removeEventListener(animationend, animationEnd)}// 添加动画结束监听document.addEventListener(animationend, animationEnd)}}效果图 我们看一下效果图。 完整代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titledrag/titlestyle*{margin: 0;padding: 0;}body{padding: 20px;}/* 图形拼图验证码 */.check{width: 400px;height: 300px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://img0.baidu.com/it/u2028084904,3939052004fm253fmtautoapp138fJPEG?w889h500);position: relative;}.check::before{content: ;width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);border: 1px solid #fff;position: absolute;top: 100px;left: 280px;}.check-child{content: ;width: 50px;height: 50px;border: 1px solid #fff;background-image: inherit;background-repeat: inherit;background-size: 400px 300px;background-position: -280px -100px;position: absolute;top: 100px;left: 0;}/* 拖动条 */.drag{width: 400px;height: 50px;background-color: #e3e3e3;margin-top: 10px;position: relative;}/* 可拖动的盒子 */.drag-child{width: 50px;height: 50px;background-color: aquamarine;z-index: 10;position: absolute;top: 0;left: 0;}/* 提示文字说明 */.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;user-select: none;z-index: 1;position: absolute;top: 0;left: 0;}keyframes move {to {transform: translateX(0);}}/style
/head
body!-- 图形校验区域 --div classcheck!-- 被校验区域 --div classcheck-child/div/div!-- 拖动条 --div classdrag!-- 操作说明 --div classdrag-tipsspan按住左边按钮向右拖动完成上方图像验证/span/div!-- 可拖动的盒子 --div classdrag-child/div/div
/body
script// 获取元素实例const drag document.querySelector(.drag-child)// 图形被校验区域const check document.querySelector(.check-child)// 通过校验回调const success () {console.log(通过校验);}// 声明鼠标按下事件const dragMouseDown event {// 添加鼠标移动事件document.addEventListener(mousemove, dragMouseMove)}// 监听鼠标移动事件const dragMouseMove event {// 获取当前 x 轴坐标const { pageX } eventif(pageX 0 || pageX 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${pageX}px)// 修改被校验区域坐标check.style.transform translateX(${pageX}px)if(pageX 278 pageX 285){// 执行回调success()}}// 结束鼠标监听事件const dragMouseUP event {// 移除鼠标移动事件document.removeEventListener(mousemove, dragMouseMove)// 获取当前 x 轴坐标const { pageX } eventif(pageX 278 || pageX 285){// 修改可移动盒子的 x 轴坐标drag.style.animation move 0.5s ease-in-out// 修改被校验区域坐标check.style.animation move 0.5s ease-in-out// 动画结束监听回调const animationEnd (){// 修改可移动盒子的 x 轴坐标drag.style.transform translateX(${0}px)// 修改被校验区域坐标check.style.transform translateX(${0}px)// 清除动画属性drag.style.animation check.style.animation // 移出动画结束监听document.removeEventListener(animationend, animationEnd)}// 添加动画结束监听document.addEventListener(animationend, animationEnd)}}// 添加鼠标按下事件document.addEventListener(mousedown, dragMouseDown)// 添加鼠标弹起事件document.addEventListener(mouseup, dragMouseUP)/script
/html本文转载于 https://juejin.cn/post/7175818459379417146 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
