编写一个模拟图片验证码的程序

准备两张图片材料：

验证图片

移动部分

然后先编写好大体的框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .big{
                margin: 30px auto;
                width: 384px;
                height: 240px;
                position: relative;
                background-image: url(img/验证图片.jpg);
            }
            .small{
                width: 66px;
                height: 58px;
                position: absolute;
                left: 0px;
                top: 48px;
                background-image: url(img/移动部分.jpg);
            }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
        </div>
        <script type="text/javascript">

        </script>
    </body>
</html>

大体效果：

最终代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .big{
                margin: 30px auto;
                width: 600px;
                height: 384px;
                position: relative;
                background-image: url(img/验证图片.jpg);
            }
            .small{
                width: 78px;
                height: 69px;
                position: absolute;
                left: 0px;
                top: 100px;
                background-image: url(img/移动部分.jpg);
            }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
        </div>
        <script type="text/javascript">
            //1.获取页面元素
            var big = document.querySelector(".big");
            var small = document.querySelector(".small");
            //鼠标是否按下标识
            var flag = false;
            //如果是第一次移动，则继续执行
            var once = true;

            //2.添加3个鼠标事件和两个开关（鼠标是否按下 && 判断是否第一次移动）
            //鼠标按下
            var delX = 0;
            small.onmousedown = function(e){
                if(once){
                    var event = e || window.event;
                    flag = true;
                    delX = event.clientX - small.offsetLeft;
//                    console.log(delX);
                }
            }
            //鼠标移动
            var tempLeft = 0;
            big.onmousemove = function(e){
                //当鼠标按在滑块上时才可以移动
                if(flag){
                    var event = e || window.event;
                    tempLeft = event.clientX - delX;

                    //确定边界
                    if(tempLeft<0){
                        tempLeft = 0;
                    }
                    if(tempLeft>big.clientWidth - small.clientWidth){
                        tempLeft = big.clientWidth - small.clientWidth;
                    }
                    small.style.left = tempLeft + "px";
                }
            }
            //鼠标释放
            document.onmouseup = function(){
                if(once){
                    //第一次移动已经结束
                    once = false;
                    //鼠标抬起，滑块不能再移动
                    flag = false;

                    //进行校验  正确位置是left:288px
                    if(tempLeft>=275  && tempLeft <= 300){
//                        console.log("success");
                        small.style.left = 288+"px";
                    }else{
//                        console.log("fail");
                        small.style.left = 0 + "px";
                        once = true;
                    }
                }
            }

        </script>
    </body>
</html>

效果：

如果滑块移动最终位置与正确位置范围差较大会回到原来的起始位置

一起学习，一起进步 -.- ，如有错误，可以发评论