码迷，mamicode.com
首页 > Web开发 > 详细

js实现拖动验证码

时间：2019-03-05 11:27:34      阅读：194      评论：0      收藏：0      [点我收藏+]

标签：rev   .com   anti   nload   block   substring   样式   abs   port   

效果图:

技术图片技术图片

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动验证</title>
    <link rel="stylesheet" href="./style.css">
    <script type="text/javascript" src="./style.js"></script>
</head>
<body>
    <div id="slideBar"></div>
    <script type="text/javascript">
        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){  
                alert("成功了");  
            },
            fail: function(){
                alert("失败了");  
            }
        };
        SliderBar("slideBar", options);
    </script>
</body>
</html>

style.js:

(function (window, document) {
    var SliderBar = function (targetDom, options) {
        // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  
        if (!(this instanceof SliderBar)) return new SliderBar(targetDom, options);
        // 参数
        this.options = this.extend({
            dataList: []
        }, options);
        // 获取dom
        this.targetDom = document.getElementById(targetDom);
        var dataList = this.options.dataList;
        if (dataList.length > 0) {
            var html = "<div class=‘slide-box‘><div class=‘slide-img-block‘>" +
                "<div class=‘slide-loading‘></div><div class=‘slide-img-border‘>" +
                "<div class=‘scroll-background slide-top‘></div><div class=‘slide-img-div‘>" +
                "<div class=‘slide-img-nopadding‘><img class=‘slide-img‘ id=‘slideImg‘ src=‘‘ />" +
                "<div class=‘slide-block‘ id=‘slideBlock‘></div><div class=‘slide-box-shadow‘ id=‘cutBlock‘></div></div>" +
                "<div class=‘scroll-background  slide-img-hint-info‘ id=‘slideHintInfo‘>" +
                "<div class=‘slide-img-hint‘><div class=‘scroll-background slide-icon‘ id=‘slideIcon‘></div>" +
                "<div class=‘slide-text‘><span class=‘slide-text-type‘ id=‘slideType‘></span>" +
                "<span class=‘slide-text-content‘ id=‘slideContent‘></span></div></div></div></div>" +
                "<div class=‘scroll-background slide-bottom‘>" +
                "<div class=‘scroll-background slide-bottom-refresh‘ id=‘refreshBtn‘ title=‘更换图片‘></div>" +
                "<div class=‘slide-bottom-no-logo‘></div></div></div></div>" +
                "<div class=‘scroll-background scroll-bar‘>" +
                "<div class=‘scroll-background slide-btn‘ id=‘slideBtn‘></div>" +
                "<div class=‘slide-title‘ id=‘slideHint‘> <-按住滑块，拖动完成上面拼图</div></div></div>";
            this.targetDom.innerHTML = html;
            this.slideBtn = document.getElementById("slideBtn");                 // 拖拽按钮
            this.refreshBtn = document.getElementById("refreshBtn");             // 换图按钮
            this.slideHint = document.getElementById("slideHint");               // 提示名称
            this.slideImg = document.getElementById("slideImg");                 // 图片
            this.cutBlock = document.getElementById("cutBlock");                 // 裁剪区域
            this.slideBlock = document.getElementById("slideBlock");             // 裁剪的图片
            this.slideIcon = document.getElementById("slideIcon");               // 正确、失败的图标
            this.slideType = document.getElementById("slideType");               // 正确、失败
            this.slideContent = document.getElementById("slideContent");         // 正确、失败的正文
            this.slideHintInfo = document.getElementById("slideHintInfo");       // 弹出
            this.resultX = 0;
            this.startX = 0;
            this.timer = 0;
            this.startTamp = 0;
            this.endTamp = 0;
            this.x = 0;
            this.imgWidth = 0;
            this.imgHeight = 0;
            this.imgList = [];
            this.isSuccess = true;
            for (var i = 1; i < 10; i++) {
                this.imgList.push(i + ".jpg");
            }
        }
        this.init();
    }
    SliderBar.prototype = {
        init: function () {
            this.event();
        },
        extend: function (obj, obj2) {
            for (var k in obj2) {
                obj[k] = obj2[k];
            }
            return obj;
        },
        event: function () {
            var _this = this;
            _this.reToNewImg();
            _this.slideBtn.onmousedown = function(event){
                _this.mousedown(_this, event);
            } 
            _this.refreshBtn.onclick = function(){
                _this.refreshBtnClick(_this);
            }
        },
        refreshBtnClick: function(_this){
            _this.isSuccess = true;
            _this.slideBlock.style.cssText = "";
            _this.cutBlock.style.cssText = "";
            _this.reToNewImg();
        },
        reToNewImg: function () {
            var _this = this;
            var index = Math.round(Math.random() * 8);         // 该方法有等于0 的情况
            var imgSrc = "./images/" + _this.imgList[index] + "";
            _this.slideImg.setAttribute("src", imgSrc);
            _this.slideBlock.style.backgroundImage = "url("+ imgSrc +")";
            _this.slideImg.onload = function (e) {
                e.stopPropagation();
                _this.imgWidth = _this.slideImg.offsetWidth;                   // 图片宽
                _this.imgHeight = _this.slideImg.offsetHeight;                 // 图片高
            }
        },
        cutImg: function () {
            var _this = this;
            _this.cutBlock.style.display = "block";
            var cutWidth = _this.cutBlock.offsetWidth;                // 裁剪区域宽
            var cutHeight = _this.cutBlock.offsetHeight;              // 裁剪区域高
            // left 
            _this.resultX = Math.floor(Math.random() * (_this.imgWidth - cutWidth * 2 - 4) + cutWidth);
            // top
            var cutTop = Math.floor(Math.random() * (_this.imgHeight - cutHeight * 2) + cutHeight);
            // 设置样式
            _this.cutBlock.style.cssText = "top:" + cutTop + "px;" + "left:" + _this.resultX + "px; display: block;";
            _this.slideBlock.style.top = cutTop + "px";
            _this.slideBlock.style.backgroundPosition = "-" + _this.resultX + "px -" + cutTop + "px";
            _this.slideBlock.style.opacity = "1";
        },
        mousedown: function (_this, e) {
            e.preventDefault();
            _this.startX = e.clientX;
            _this.startTamp = (new Date()).valueOf();
            var target = e.target;
            target.style.backgroundPosition = "0 -216px";
            _this.slideHint.style.opacity = "0";
            if(_this.isSuccess){
                _this.cutImg();
            }
            document.addEventListener(‘mousemove‘, mousemove);
            document.addEventListener(‘mouseup‘, mouseup);
        
            // 拖拽
            function mousemove(event) {
                _this.x = event.clientX - _this.startX;
                if (_this.x < 0) {
                    _this.slideBtn.style.left = "0px";
                    _this.slideBlock.style.left = "2px";
                } else if (_this.x >= 0 && _this.x <= 217) {
                    _this.slideBtn.style.left = _this.x + "px";
                    _this.slideBlock.style.left = _this.x + "px";
                } else {
                    _this.slideBtn.style.left = "217px";
                    _this.slideBlock.style.left = "217px";
                }
                _this.slideBtn.style.transition = "none";
                _this.slideBlock.style.transition = "none";
            };
            // 鼠标放开
            function mouseup() {
                document.removeEventListener(‘mousemove‘, mousemove);
                document.removeEventListener(‘mouseup‘, mouseup);
                var left = _this.slideBlock.style.left;
                left = parseInt(left.substring(0, left.length-2));
                if(_this.resultX > (left - 2) && _this.resultX < (left + 2)){
                    _this.isSuccess = true;
                    _this.endTamp = (new Date()).valueOf();
                    _this.timer = ((_this.endTamp - _this.startTamp) / 1000).toFixed(1);
                    // 裁剪图片(拼图的一块)
                    _this.slideBlock.style.opacity = "0";
                    _this.slideBlock.style.transition = "opacity 0.6s";
                    // 裁剪的区域(黑黑的那一块)
                    _this.cutBlock.style.opacity = "0";
                    _this.cutBlock.style.transition = "opacity 0.6s";
                    // 正确弹出的图标
                    _this.slideIcon.style.backgroundPosition = "0 -1207px";
                    _this.slideType.className = "slide-text-type greenColor";
                    _this.slideType.innerHTML = "验证通过:";
                    _this.slideContent.innerHTML = "用时" + _this.timer + "s";
                    setTimeout(function(){
                        _this.cutBlock.style.display = "none";
                        _this.slideBlock.style.left = "2px";
                        _this.reToNewImg();
                    }, 600);
                    _this.options.success&&_this.options.success();
                }else{
                    _this.isSuccess = false;
                    // 设置样式
                    // 裁剪图片(拼图的一块)
                    _this.slideBlock.style.left = "2px";
                    _this.slideBlock.style.transition = "left 0.6s";
                    // 错误弹出的图标
                    _this.slideIcon.style.backgroundPosition = "0 -1229px";
                    _this.slideType.className = "slide-text-type redColor";
                    _this.slideType.innerHTML = "验证失败:";
                    _this.slideContent.innerHTML = "拖动滑块将悬浮图像正确拼合";
                    _this.options.fail&&_this.options.fail();
                }
                // 设置样式
                _this.slideHintInfo.style.height = "22px";
                setTimeout(function(){
                    _this.slideHintInfo.style.height = "0px";
                }, 1300);
                _this.slideBtn.style.backgroundPosition = "0 -84px";
                _this.slideBtn.style.left = "0";
                _this.slideBtn.style.transition = "left 0.6s";
                _this.slideHint.style.opacity = "1";
            }
        }
    }
    window.SliderBar = SliderBar;
}(window, document));

style.css:

.slide-box{
    display: block;
    position: relative;
}
.scroll-background{
    background-image: url("./images/sprite.3.2.0.png");
    background-repeat: no-repeat;
}
.scroll-bar{
    margin-left: 15px;
    width: 261px;
    background-position: 0 0;
    height: 28px;
    position: relative;
}
.slide-btn{
    height: 44px;
    width: 44px;
    background-position: 0 -84px;
    cursor: pointer;
    display: block;
    position: absolute;
    left: 0;
    top: -9px;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 13px;
    z-index: 399;
}
.slide-title{
    cursor: default;
    position: absolute;
    left: 35px;
    font-size: 12px !important;
    color: #486c80;
    opacity: 1;
    filter: alpha(opacity=100);
    height: 28px;
    line-height: 28px !important;
    text-align: center;
    width: 220px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.slide-img-div{
    width: 260px;
    height: 116px;
    padding: 0 15px 2px 13px;
    position: relative;
    background-color: #f2ece1;
    border-left: 1px solid #e4ddd1;
    border-right: 1px solid #e4ddd1;
}
.slide-img-div img{
    width: 100%;
    height: 100%;
}
.slide-top{
    height: 14px;
    width: 290px;
    background-position: 0 -1341px;
    position: relative;
}
.slide-bottom{
    height: 28px;
    width: 290px;
    background-position: 0 -56px;
    line-height: 14px !important;
    position: relative;
    text-align: left;
    overflow: visible;
}
.slide-bottom-no-logo{
    margin-right: 15px;
    width: 65px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 6px;
    background-color: #f2ece1 !important;
    cursor: default;
}
.slide-bottom-refresh{
    overflow: visible;
    display: block;
    zoom: 1;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
    margin-right: 16px !important;
    background-color: #f1e9de;
    margin: 6px 0 0 18px !important;
    height: 14px;
    width: 14px;
    background-position: 0 -1179px;
}

.slide-box-shadow{
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) inset;
}
.slide-block{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 2px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    border: 1px solid rgba(255, 255, 0, 0.8);
    background-size: 260px 116px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4);
    box-sizing: border-box;
    z-index: 10;
}
.slide-img-nopadding{
    position: relative;
    width: 100%;
    height: 100%;    
}
.slide-icon{
    float: left;
    height: 22px;
    width: 26px;
}
.slide-img-hint{
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 12px !important;
    line-height: 22px !important;
    margin: 0 auto;
    position: relative;
}
.slide-text{
    text-align: left !important;
    color: #4b3f33;
}
.slide-img-hint-info{
    height: 22px;
    width: 260px;
    background-position: 0 -674px;
    height: 0;
    overflow: hidden;
    position: absolute;
    bottom: 1px;
    transition: height 0.3s;
    z-index: 11;
}
.redColor{
    color: red;
}
.greenColor{
    color: green;
}
.slide-img-border{
    margin-bottom: 3px;
}

images:

技术图片

转自：https://www.cnblogs.com/huaji666/p/8257710.html

 

js实现拖动验证码

标签：rev   .com   anti   nload   block   substring   样式   abs   port   

原文地址：https://www.cnblogs.com/bin521/p/10475163.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！