手机滑动图片验证引用zepto.js

最新推荐文章于 2024-09-12 20:05:07 发布

Thekingyu

最新推荐文章于 2024-09-12 20:05:07 发布

阅读量3k

点赞数

分类专栏：前端功能前端样式 js功能

本文链接：https://blog.csdn.net/Thekingyu/article/details/86609677

版权

js功能同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端样式

11 篇文章 0 订阅

订阅专栏

前端功能

8 篇文章 0 订阅

订阅专栏

效果同上，其中icon自己找，本例不带任何icon，另外连往哪用，在什么地方用都不会的就散了吧。

附赠两张图片。其不会自己插进去的也可以散了。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
       <title>查看更多</title>
       <script type="text/javascript" src="zepto_1.1.3.js"></script>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style>
       .code_bg {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background-color: rgba(0, 0, 0, .5);
           /* z-index: 99; */
       }

       .icon-login-bg {
           /*background-image: url(../img/icon/loginicon.png);*/
           background-image: url(../img/1.png);
           background-repeat: no-repeat;
       }

       .code-con {
           position: absolute;
           top: 1rem;
           /*width: 2.7rem;*/
           /*width: 270px;*/
           left: 0.5rem;
           /*margin-left: -160px;*/
           background-color: #fff;
           z-index: 100;
           -moz-user-select: none;
           -webkit-user-select: none;
       }

       .code-img {
           margin: 0.05rem 0.05rem;
           padding: 0.05rem 0.05rem;
           background-color: #f5f6f7;
       }

       .code-img img {
           display: block;
       }

       .icon-w-25 {
           display: inline-block;
           width: 0.25rem;
           height: 0.25rem;
           text-indent: -99.99rem;
       }

       .icon-push {
           cursor: pointer;
           background-position: -1.49rem -0.95rem;
       }

       .code-push {
           height: 0.25rem;
       }

       .code-btn {
           position: relative;
           height: 0.3rem;
           text-align: center;
           color: #999;
           margin: 0.1rem 0.1rem;
           box-sizing: border-box;
           background-color: #f5f6f7;
           border-radius: 0.15rem;
           border: 0.01rem solid #e1e1e1;
       }

       .code-btn-m {
           position: absolute;
           width: 0.4rem;
           height: 0.4rem;
           border-radius: 50%;
           background-color: #f5f6f7;
           border: 1px solid #e1e1e1;
           z-index: 5;
           top: -0.08rem;
           left: 0rem;
           box-shadow: 0 0 0.03rem #ccc;
           cursor: pointer;
           background-position: -0.63rem 0.1rem;
       }

       .code-btn-img {
           background-image: url(../img/1.png);
           background-repeat: no-repeat;
       }

       .code-btn-img.active {
           background-position: -1.34rem 0.1rem;
       }

       .code-btn-img.error {
           background-position: 0.08rem 0.1rem;
       }

       .code-img-con {
           position: relative;
       }

       .code-mask {
           position: absolute;
           top: 0;
           left: 0;
           z-index: 10;
       }

       .code-mask img {
           height: 1.7rem;
           width: 0.4rem;
       }

       .code-tip {
           padding-left: 0.1rem;
           font-size: 0.12rem;
           color: #999;
       }

       .code-tip-red {
           color: red;
       }

       .code-tip-green {
           color: green;
       }

       .box {
           width: 100vw;
           height: 100vh;
           position: fixed;
           top: 0;
           left: 0;
           background: seagreen;
           z-index: 999;
           touch-action: none;
           /*禁止浏览器滑动返回影响相右滑动*/
       }

       .loding {
           color: #4285F4;
           float: right;
           padding-top: 0.05rem;
           padding-right: 0.2rem;
           display: inline-block;
       }
   </style>

   <body>
       <div id="imgscode" class="box"></div>
   </body>
   <script type="text/javascript">
       $(function() {

           loadimg("123132")
           //加载数据传入手机号
           var $divMove = $(this).find(".code-btn-img"); //拖动按钮
           var $divWrap = $(this).find(".code-btn"); //鼠标可拖拽区域
           dragPanelMove(".code-btn", ".code-btn-img");

           function dragPanelMove(downDiv, moveDiv) {
               //               数据为js加载,其需绑定on
               $("#imgscode").on("touchstart", downDiv, function(e) {
                   var isMove = true;
                   //touchstart值与mousemove不在同一地方
                   var div_x = e.targetTouches[0].pageX - $(downDiv).offset().left;
                   var div_y = e.targetTouches[0].pageY - $(downDiv).offset().top;
                   $(moveDiv).css({
                       "box-shadow": "0 0 8px #666"
                   });
               });

               $(document).on("touchmove", downDiv, function(e) {
                   var x = e.targetTouches[0].pageX;
                   mX = event.pageX;
                   dX = $(downDiv).offset().left;
                   dY = $(downDiv).offset().top;
                   if(x > $(downDiv).offset().left + 20 && x < $(downDiv).offset().left + $(downDiv).width() - 19) {
                       var obj = $(moveDiv);
                       obj.css({
                           "left": (x - dX - 20) + "px"
                       }); //div动态位置赋值
                       $(".code-mask").css({
                           "left": (x - dX - 20) + "px"
                       });
                   } else {}
               }).on("touchend", downDiv, function(e) {
                   var x = e.changedTouches[0].pageX - $(".code-btn").offset().left - 19;
                   ajaxpost({
                       "url": "api/verCode/validImageVerCode",
                       "data": JSON.stringify({
                           mobile: "18337898621",
                           abscissa: x,
                       }),
                   }).then(res => {
                       if(res.code == 1000) {

                       } else {
                           $(moveDiv).css({
                               "box-shadow": "0 0 8px #EA3E00"
                           });

}

})

isMove = false;
});

}

})

       $("#imgscode").on("click", ".loding", function() {
           loadimg("123456")
       })

       //如果没有接口直接传里两个图片传值为一个坐标x,
       function loadimg(iphone) {
           console.log(1111)
           ajaxget({
               "url": "url" + iphone,
           }).then(res => {
               console.log(res.code)
               if(res.code == 1000) {
                   var $this = $("#imgscode"); //获取当前对象
                   var html = '<div class="code-k-div">' +
                       '<div class="code_bg"></div>' +
                       '<div class="code-con">' +
                       '<div class="code-img">' +
                       '<div class="code-img-con">' +
                       '<div class="code-mask"><img src="' + res.data.cutImage + '"></div>' +
                       '<img style="height:1.7rem;width:270px" src="' + res.data.mainImage + '"></div>' +
                       '<div class="code-push"><span class="loding">刷新</span><span class="code-tip"></span></div>' +
                       '</div>' +
                       '<div class="code-btn">' +
                       '<div class="code-btn-img code-btn-m"></div>' +
                       '<span style="line-height:0.3rem">按住滑块，拖动完成上方拼图</span>' +
                       '</div></div></div>';
                   $this.html(html);
               } else {
                   loadimg(iphone)
               }
           })
       }

       //修改某些机型滑动返回影响
       var xStart, xEnd, yStart, yEnd;
       document.addEventListener("touchstart", function(evt) {
           xStart = evt.touches[0].pageX;
           yStart = evt.touches[0].pageY;
       }, false);

       document.addEventListener('touchmove', function(evt) {
           xEnd = evt.touches[0].pageX;
           yEnd = evt.touches[0].pageY;
           //左右滑动
           if(Math.abs(xStart - xEnd) > Math.abs(yStart - yEnd)) {
               evt.preventDefault();
           }
       }, false);
   </script>

</html>