css3实现拖拽滑块验证高效代码

主页 M

css3实现拖拽滑块验证高效代码

2020-05-30 网页编程网 网页编程网

<style>
*{margin:0;padding: 0;}
li{list-style: none;}
.login{
width:300px;
height:40px;
border:1px solid white;
margin:100px auto; 
background-color:#E8E8E8; 
}
.rect{
    position: relative;
    width: 100%;
    height:40px;
    line-height: 40px;
    text-align: center;
    user-select: none;
}
.bg{
    position: absolute; 
    width:0;
    height: 40px;
    background-color: #096;
}
.slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 40px;
    box-sizing: border-box;/*css3怪异盒模型，不云计算边框像素*/
    background-color: white;
    border:1px solid #ccc;
    cursor: move;
}
</style>
</head>
<body>
<div class="login">
<div class="bg"></div>
<div class="rect">
拖拽滑块验证
<div class="slide"><img src="" /></div>
</div>
</div>
<script>
/*1.在js中获取元素；2获取鼠标点击；3.改变left值*/
console.log('')
var oSlide=document.querySelector('.slide'),
oRect=document.querySelector('.rect'),
oBg=document.querySelector('.bg'),
oImg=document.querySelector('.slide img'),left=0;
slideWidth=oSlide.offsetWidth;
rectWidth=oRect.offsetWidth;
oSlide.onmousedown=function(e){
var initX=e.clientX;//鼠标按下时X值
document.onmousemove=function(e){
    var moveX=e.clientX;
    left=moveX-initX;
/*  if(left<0){left=0;}
    if(left>rectWidth-slideWidth){left=rectWidth-slideWidth;}
    */
    left=Math.max(left,0);
    left=Math.min(left,rectWidth-slideWidth);
    oSlide.style.left=oBg.style.width=left+'px';
    if(left>=rectWidth-slideWidth){
        //发送数据0与1
        oRect.style.color='#fff';
        oImg.src='success.png';
    }
}
}
document.onmouseup=function(){
document.onmousemove=null;//清除移动事件
if(left<rectWidth-slideWidth){
    oSlide.style.left=oBg.style.width=0;
}
}
</script>
</body>

阅读原文

阅读 3514

123 显示电脑版