请选择 进入手机版 | 继续访问电脑版

前端滑块验证码

[复制链接]
听见深浅 发表于 2021-1-2 18:58:34 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
滑块验证码

图片素材

  图片2.png

图片1.png

图片2.1.png

图片2.2.png

素材为自己动手扣的所以接纳的时当地的绝对路径
滑块style设置。
  1.                         无标题文档                //整体登岸盒子div,style.article {    width: 300px;    height: 400px;    border: 3px solid #ddd;    margin-left: auto;    margin-right: auto;    box-shadow: 0 0 2px 2px #ddd;}//去除表里边距* {    margin: 0;    padding: 0}//验证框用来放image.yanzhen {    width: 200px;    overflow: hidden;    margin-left: auto;    margin-right: auto;    border: 3px solid #eee;}.biaoti {    width: 200px;    color: #121111;    font-family: Constantia, "Lucida Bright",     "DejaVu Serif", Georgia, "serif";    margin-left: auto;    margin-top: 0px;    margin-bottom: 0px;}//设置滑块条.huakuai {    position: relative;    height: 30px;    width: 200px;    margin-top: 5px;    margin-left: auto;    margin-right: auto;    border-radius: 10px;    background-color: #EEE;}//设置滑块下面的p标签.huakuai>p {    position: absolute;    left: -3px;    width: 30px;    height: 30px;    background-color: white;    border-radius: 30px;}.biaoti>i {    display: inline-block;    background-image: url("C:\Users\lenovo\Desktop\1.png");}//子绝父相设置.image {    position: relative;}//设置小图为绝对布局.min {    position: absolute;    left: 0px;    top: 53px;}               
复制代码
body设置
  1.       [size=3]登录验证[/size]
  2.            [align=center][img]https://www.jianchenwangluo.com/C:UserslenovoDesktop1.png[/img][/align] [align=center][img]https://www.jianchenwangluo.com/C:UserslenovoDesktop1.1.png[/img][/align]
  3.   
  4.          
  5.   
  6.    
复制代码
js代码
[code]<script>                //randomimage用来再每一次刷新页面时差异的滑块配景                function randomimage(){                //向上取整一个随机数                        let rdm=Math.ceil(Math.random() * 2);                //控制台打印随机数                        console.log(rdm);                        if(rdm==1)                                {                                        //i根据d选择设置图片路径                                        max.src="file:///C:/Users/lenovo/Desktop/1.png";                                        //dom获取滑块和小图                                        let a=document.querySelector(".huakuai>p");                                        let b=document.querySelector(".min");                                        //滑块事件移动的逻辑当鼠标按下鼠标移动鼠标松开这三个事件                                        //添加鼠标按下事件                                        a.addEventListener("mousedown",function(event){                                        //声明当前滑块的位置                                        let x=event.pageX;                                        //再当鼠标按下时添加鼠标移动事件                                        a.addEventListener("mousemove",function(item){                                        //让滑块位置即是鼠标当前位置减去刚开始隔断窗口左侧位置x                                        let x1=item.pageX-x;                                        //当x138&&parseInt(b.style.left)88&&parseInt(b.style.left)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )