首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现移动端图片滑块验证功能

Posted in Javascript onSeptember 29, 2020

之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。
(最新完美版本，js+canvas实现，兼容pc，ie9和移动，js+cavans实现图片滑块验证)

老样子，还是先看效果

js实现移动端图片滑块验证功能

原理和上篇uniapp的滑块一样，不一样的是这里是纯js实现，代码是全部是自己写的，有不清楚的可以留言。

下面是全部代码：

html:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
 
    .sliderModel {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
    }
 
    .title {
      width: 100%;
      height: 60px;
      font-size: 18px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .cont {
      position: relative;
      background: #fff;
      width: 300px;
      border-radius: 8px;
      overflow: hidden;
      padding-bottom: 20px;
    }
 
    .imgWrap {
      position: relative;
      width: 280px;
      height: 150px;
      border-radius: 8px;
      margin: 0 auto;
      overflow: hidden;
    }
 
    #sliderRefresh {
      position: absolute;
      top: 20px;
      right: 30px;
      cursor: pointer;
      color: green;
    }
 
    .img {
      display: block;
      width: 100%;
      height: 100%;
    }
 
    .sliderOver {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      background: #ddd;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }
 
    .smartImg {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      overflow: hidden;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
 
    .simg {
      position: absolute;
      display: block;
      width: 280px;
      height: 150px;
    }
 
 
 
 
    .sliderBox {
      width: 280px;
      margin: 10px auto 0;
      height: 36px;
      position: relative;
    }
 
    .sliderF {
      width: 100%;
      height: 100%;
      z-index: 3;
    }
 
    .sliderS {
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      height: 36px;
      width: 36px;
      background: #007cff;
      border-radius: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    .icon {
      width: 20px;
      height: 20px;
 
    }
 
 
    .bgC {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 30px;
      border-radius: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #999999;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
      overflow: hidden;
    }
 
    .bgC_left {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 28px;
      border-top-left-radius: 28px;
      border-bottom-left-radius: 28px;
      line-height: 28px;
      font-size: 14px;
      background-color: #eee;
      box-shadow: inset 0 0 4px #ccc;
      text-align: center;
    }
 
 
    .showMessage {
      text-align: center;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
 
    #closeBtn {
      position: fixed;
      z-index: 10;
      bottom: 10px;
      left: 50%;
    }
  </style>
</head>
 
<body>
  <div id="clickBtn">点击</div>
  <div class="sliderModel">
    <div class="cont">
      <div class="title">图形验证</div>
      <div id="sliderRefresh">刷新</div>
      <div class="imgWrap" id="imgWrap">
        <img class="img" src="" />
        <div class="sliderOver" id="sliderOver"></div>
        <div class="smartImg" id="smartImg">
          <img class="simg" src="" />
        </div>
      </div>
      <div class="sliderBox">
        <div class="sliderF" id="slider">
          <div class="sliderS" id="sliderBtn">
            <img class="icon" src="images/slider/sangangy.png" />
          </div>
        </div>
        <div class="bgC">
          拖动左边滑块完成上方拼图
          <div class="bgC_left" id="bgC_left"></div>
        </div>
      </div>
      <div class="showMessage">
 
      </div>
    </div>
  </div>
  <div id="closeBtn">关闭</div>
 
</body>
<script src="slider.js"></script>
<script>
  var object = {
    bImg: 'imgWrap',
    sImg: 'smartImg',
    sImgOver: 'sliderOver',
    sliderF: 'slider',
    sliderBtn: 'sliderBtn',
    sliderBg: 'bgC_left',
    refreshBtn: 'sliderRefresh',
    range: 5,
    imgArr: ['images/sliderz/1.jpg', 'images/sliderz/2.jpg', 'images/sliderz/3.jpg', 'images/sliderz/4.jpg',
      'images/sliderz/5.jpg'
    ],
    refreshCallback: function (e) {
      var showMessage = document.getElementsByClassName('showMessage')[0];
      showMessage.innerHTML = "";
      showMessage.style.color = "#333";
    },
    callback: function (e) {
      var showMessage = document.getElementsByClassName('showMessage')[0];
      if (!e) {
        showMessage.innerHTML = "验证失败，请重新验证";
        showMessage.style.color = "red";
      } else {
        showMessage.innerHTML = "验证成功！";
        showMessage.style.color = "green";
      }
    },
  }
  var mSlider = null;
  document.getElementById('clickBtn').onclick = function () {
    document.getElementsByClassName('sliderModel')[0].style.display = "flex";
    mSlider = new window.mobileSlider(object)
  }
  document.getElementById('closeBtn').onclick = function () {
    document.getElementsByClassName('sliderModel')[0].style.display = "none";
  }
</script>
 
</html>

js部分（slider.js）

(function () {
 
  function mobileSlider(params) {
    var object = {
      bImg: params.bImg, //大图片的盒子
      sImg: params.sImg, //图片上的小图片
      sImgOver: params.sImgOver, //图片上的占位区域
      sliderF: params.sliderF, //滑块的父元素
      sliderBtn: params.sliderBtn, //滑块
      sliderBg: params.sliderBg, //滑块滑动过程中的背景块
      refreshBtn: params.refreshBtn, //刷新按钮
      range: params.range, //验证通过的运行范围值
      imgArr: params.imgArr, //图片数组
      refreshCallback: params.refreshCallback, //刷新回调
      callback: params.callback //验证回调函数，true为成功，false为失败
    };
 
    var sliderF = document.getElementById(object.sliderF);
    var sliderBtn = document.getElementById(object.sliderBtn);
    var sliderBg = document.getElementById(object.sliderBg);
    var sImg = document.getElementById(object.sImg);
    var bImg = document.getElementById(object.bImg);
    var sImgOver = document.getElementById(object.sImgOver);
    var refreshBtn = document.getElementById(object.refreshBtn);
    var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth;
    var sImgBeginLeft = 0;
 
 
    function refresh() {
      sliderBtn.style.left = sliderBg.style.width = 0;
      sImgBeginLeft = 0;
      var ram = Math.random();
      var imgIndex = Math.floor(object.imgArr.length * ram);
      var imgSrc = object.imgArr[imgIndex];
      bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc;
      sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
      sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px";
      sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
      sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
      sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
      object.refreshCallback(true)
    }
    refresh();
 
    sliderBtn.ontouchstart = function (e) {
      var ev = e || window.event
      var downX = ev.touches[0].pageX;
      var sImgLeft = parseInt(sImg.style.left);
      this.ontouchmove = function (e) {
        var ev = e || window.event;
        var leftX = ev.touches[0].pageX - downX;
        leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left)
        sliderBtn.style.left = leftX + 'px';
        sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px";
        sImg.style.left = leftX + sImgLeft + "px";
      }
      this.ontouchend = function (e) {
        this.ontouchmove = null; //移除移动事件
        var sImgLeft = parseInt(sImg.style.left);
        var sImgOverLeft = parseInt(sImgOver.style.left);
        if (Math.abs(sImgOverLeft - sImgLeft) < object.range) {
          object.callback && object.callback(true)
        } else {
          object.callback && object.callback(false)
          var timer = null,
            step = 10;
          var sliderBtnLeft = parseInt(sliderBtn.style.left)
          timer = setInterval(function () {
            sliderBtnLeft -= step;
            step += 5;
            if (sliderBtnLeft <= 0) {
              clearInterval(timer);
              sliderBtnLeft = 0;
              sliderBtn.style.left = sliderBg.style.width = 0;
              sImg.style.left = parseInt(sImgBeginLeft) + "px"
            }
            sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px";
            sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px"
          }, 20)
 
        }
      }
    };
 
 
 
    refreshBtn.ontouchstart = function () {
      refresh()
    }
 
  }
 
  window.mobileSlider = mobileSlider;
})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。 

js实现移动端图片滑块验证功能

- Author -

一码平川！

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript prototype属性深入介绍
Nov 27 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
阿联酋购物网站(26) 波兰购物网站(52) 捷克购物网站(26) 斯洛伐克购物网站(7) 智利购物网站(5) 卡塔尔购物网站(3) 奥地利购物网站(28) 沙特阿拉伯购物网站(9) 新西兰购物网站(42) 土耳其购物网站(10)
You might like
详解：――如何将图片储存在数据库里
2006/12/05 PHP
php下的权限算法的实现
2007/04/28 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
从零学习node.js之文件操作（三）
2017/02/21 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python单元和文档测试实例详解
2019/04/11 Python
关于python字符串方法分类详解
2019/08/20 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
如何查看python关键字
2021/01/17 Python
运动会表扬稿大全
2014/01/16 职场文书
商场活动策划方案
2014/01/24 职场文书
市三好学生主要事迹
2014/01/28 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
小小的船教学反思
2014/02/21 职场文书
个人自荐材料
2014/05/23 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
医生个人年度总结
2015/02/28 职场文书
听证通知书
2015/04/24 职场文书
2016年寒假生活小结
2015/10/10 职场文书
python基础之类属性和实例属性
2021/10/24 Python