js登录滑动验证的实现(不滑动无法登陆)-前端开发

下面是详细的“js登录滑动验证的实现(不滑动无法登陆)”攻略，包含以下几部分：

下面是详细的“js登录滑动验证的实现(不滑动无法登陆)”攻略，包含以下几部分：

实现思路
代码示例1：基于jQuery的实现
代码示例2：基于原生JS的实现

实现思路

滑动验证的实现思路，大概可以分为以下几个步骤：

在页面中添加一个滑块和一个滑块背景；
通过JS监听滑块的拖动事件，并根据滑块的位置计算出滑块背景的“滑过”的距离；
根据计算得到的距离，判断滑块是否已经滑到了规定的位置（例如，滑块需要滑到背景的最右侧才算通过验证）；
如果滑块已经滑到了规定位置，则允许用户进行登陆操作；否则，提示用户滑动滑块以通过验证。

在具体实现过程中，可能需要注意一些细节问题，例如处理滑块的边界情况、处理滑块的复位问题等。

代码示例1：基于jQuery的实现

下面是一个基于jQuery的滑动验证示例：

HTML代码：

<div id="slider">
  <div class="slider-bg"></div>
  <div class="slider-handler"></div>
</div>

CSS代码：

#slider {
  position: relative;
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
}

#slider .slider-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

#slider .slider-handler {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
}

JS代码：

$(function() {
  var slider = $('#slider');
  var handler = slider.find('.slider-handler');
  var bg = slider.find('.slider-bg');
  var success = false;
  var distance = 0;

  handler.on('mousedown', function(evt) {
    evt.preventDefault();
    var startX = evt.clientX;
    var startY = evt.clientY;

    $(document).on('mousemove.slider', function(evt) {
      var offsetX = evt.clientX - startX;
      var offsetY = evt.clientY - startY;
      var position = handler.position();
      var left = position.left + offsetX;

      if (left < 0) {
        left = 0;
      } else if (left > slider.width() - handler.width()) {
        left = slider.width() - handler.width();
      }

      handler.css('left', left);
      bg.css('background-position', -left + 'px 0');

      distance = left / (slider.width() - handler.width()) * 100;
    });

    $(document).on('mouseup.slider', function(evt) {
      $(document).off('mousemove.slider');
      $(document).off('mouseup.slider');

      if (distance >= 100) {
        success = true;
        handler.css('left', slider.width() - handler.width());
        bg.css('background-position', '-' + (slider.width() - handler.width()) + 'px 0');
        slider.addClass('success');
      } else {
        handler.animate({ left: 0 }, 200);
        bg.animate({ backgroundPosition: '0 0' }, 200);
      }
    });
  });

  $('#submit').on('click', function(evt) {
    if (success) {
      alert('登陆成功！');
    } else {
      alert('请先通过滑动验证！');
    }
  });
});

注意：本示例依赖于jQuery库，需要引入jQuery才能正常工作。另外，示例中用到的CSS代码中包含了一些基本的样式定义，可以根据实际需求进行修改。

代码示例2：基于原生JS的实现

下面是一个基于原生JS的滑动验证示例：

HTML代码：

<div id="slider">
  <div class="slider-bg"></div>
  <div class="slider-handler"></div>
</div>

CSS代码：

#slider {
  position: relative;
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
}

#slider .slider-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

#slider .slider-handler {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
}

JS代码：

var slider = document.getElementById('slider');
var handler = slider.querySelector('.slider-handler');
var bg = slider.querySelector('.slider-bg');
var success = false;
var distance = 0;

handler.addEventListener('mousedown', function(evt) {
  evt.preventDefault();
  var startX = evt.clientX;
  var startY = evt.clientY;

  document.addEventListener('mousemove', onMousemove);
  document.addEventListener('mouseup', onMouseup);

  function onMousemove(evt) {
    var offsetX = evt.clientX - startX;
    var offsetY = evt.clientY - startY;
    var position = getComputedStyle(handler).getPropertyValue('left').replace('px', '');
    var left = parseInt(position) + offsetX;

    if (left < 0) {
      left = 0;
    } else if (left > slider.offsetWidth - handler.offsetWidth) {
      left = slider.offsetWidth - handler.offsetWidth;
    }

    handler.style.left = left + 'px';
    bg.style.backgroundPosition = -left + 'px 0';

    distance = left / (slider.offsetWidth - handler.offsetWidth) * 100;
  }

  function onMouseup(evt) {
    document.removeEventListener('mousemove', onMousemove);
    document.removeEventListener('mouseup', onMouseup);

    if (distance >= 100) {
      success = true;
      handler.style.left = slider.offsetWidth - handler.offsetWidth + 'px';
      bg.style.backgroundPosition = '-' + (slider.offsetWidth - handler.offsetWidth) + 'px 0';
      slider.classList.add('success');
    } else {
      handler.animate({ left: 0 }, 200);
      bg.animate({ backgroundPosition: '0 0' }, 200);
    }
  }
});

document.getElementById('submit').addEventListener('click', function(evt) {
  if (success) {
    alert('登陆成功！');
  } else {
    alert('请先通过滑动验证！');
  }
});

注意：本示例是基于原生JS实现的，不需要任何第三方库，可以直接在页面中使用。另外，示例中用到的CSS代码中包含了一些基本的样式定义，可以根据实际需求进行修改。