前言
代码实现
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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>滑块验证码
title> <style> * {
margin: 0px; padding: 0px; font-family: "微软雅黑"; } .drag {
width: 300px; height: 40px; line-height: 40px; background-color: #e8e8e8; position: relative; margin: 0 auto; } .bg {
width: 40px; height: 100%; position: absolute; background-color: #75CDF9; } .text {
position: absolute; width: 100%; height: 100%; text-align: center; user-select: none; } .btn {
width: 40px; height: 38px; position: absolute; border: 1px solid #ccc; cursor: move; font-family: "宋体"; text-align: center; background-color: #fff; user-select: none; color: #666; }
style>
head> <body> <div class="drag"> <div class="bg">
div> <div class="text" onselectstart="return false">请拖动滑块解锁
div> <div class="btn">>>
div>
div> <script> //一、定义一个获取DOM元素的方法 var $ = function (selector) {
return document.querySelector(selector); }, box = $(".drag"),//容器 bg = $(".bg"),//背景 text = $(".text"),//文字 btn = $(".btn"),//滑块 success = false,//是否通过验证的标志 distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离） //二、给滑块注册鼠标按下事件 btn.onmousedown = function (e) {
//1.鼠标按下之前必须清除掉后面设置的过渡属性 btn.style.transition = ""; bg.style.transition = ""; //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。 //2.当滑块位于初始位置时，得到鼠标按下时的水平位置 var e = e || window.event; var downX = e.clientX; //三、给文档注册鼠标移动事件 document.onmousemove = function (e) {
var e = e || window.event;//是为了更好的兼容IE浏览器和非ie浏览器。在ie浏览器中,window.event是全局变量,在非ie中，就需要自己传入一个参数来获取event啦，所以就有了var e = e||window.event //1.获取鼠标移动后的水平位置 var moveX = e.clientX; //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置） var offsetX = moveX - downX; //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系 if (offsetX > distance) {
offsetX = distance;//如果滑过了终点，就将它停留在终点位置 } else if (offsetX < 0) {
offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置 } //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度 btn.style.left = offsetX + "px"; bg.style.width = offsetX + "px"; //如果鼠标的水平移动距离 = 滑动成功的宽度 if (offsetX == distance) {
//1.设置滑动成功后的样式 text.innerHTML = "验证通过"; text.style.color = "#fff"; btn.innerHTML = "√"; btn.style.color = "green"; bg.style.backgroundColor = "lightgreen"; //2.设置滑动成功后的状态 success = true; //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件） btn.onmousedown = null; document.onmousemove = null; //3.成功解锁后的回调函数 setTimeout(function () {
alert('解锁成功！'); }, 100); } } //四、给文档注册鼠标松开事件 document.onmouseup = function (e) {
//如果鼠标松开时，滑到了终点，则验证通过 if (success) {
return; } else {
//反之，则将滑块复位（设置了1s的属性过渡效果） btn.style.left = 0; bg.style.width = 0; btn.style.transition = "left 1s ease"; bg.style.transition = "width 1s ease"; } //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。 document.onmousemove = null; document.onmouseup = null; } }
script>
body>
html> 效果图展示
如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214899.html原文链接：https://javaforall.net
