鼠标点击拖动滑块即可快速完成登录。
程序分析：
- 鼠标点击
- 鼠标点击后拖动滑块
- 鼠标点击取消
- 滑块水平移动
效果图演示
初始页面
点击滑块进行拖动
此时的你是不是急于想实现它呢？？？
代码演示
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>#textbar {margin: 10px;height: 80px;border-radius: 38px;background-color: gray;opacity: 0.5;}#touch_bar {position: relative;top: -82px;border: 2px solid blue;width: 15%;height: 80px;border-radius: 38px;background-color: white;display: flex;flex: row;justify-content: center;align-items: center;z-index: 20;}#textnew {position: relative;top: -164px;height: 80px;border-radius: 38px;background-color: blue;z-index: 15;}#textold {height: 80px;z-index: 10;display: flex;flex: row;justify-content: center;align-items: center;}</style></head><body><div id="textbar"><div id="textold"><span style="font-size: 30px">滑动登录</span></div><div id="touch_bar"></div><div id="textnew"></div></div></body><script>var isTouch = false; //是否点击var startX = 0; //鼠标点击的偏移量，进行平滑移动(function() {var touch_bar = document.getElementById("touch_bar");var textbar = document.getElementById("textbar");var textnew = document.getElementById("textnew");/* 为滑块绑定鼠标移动事件当鼠标在滑块上移动时，滑块在水平方向上跟随移动*/touch_bar.onmousemove = function(ev) {var ev = ev || event;if (ev.clientX - startX > 0 &&ev.clientX - startX < textbar.offsetWidth - touch_bar.offsetWidth &&isTouch) {touch_bar.style.left = ev.clientX - startX + "px";textnew.style.width = ev.clientX - startX + touch_bar.offsetWidth / 2 + "px";}}/*设置滑块点击事件*/touch_bar.onmousedown = function(ev) {isTouch = true;startX = event.clientX;}/*设置滑块鼠标点击取消事件*/touch_bar.onmouseup = function(ev) {isTouch = false;startX = 0;touch_bar.style.left = "0px";textnew.style.width = "0px";}/*设置滑块鼠标移出事件*/touch_bar.onmouseout = function(ev) {isTouch = false;startX = 0;touch_bar.style.left = "0px";textnew.style.width = "0px";}//重置偏移量touch_bar.style.left = "0px";textnew.style.width = "0px";})();</script></html>
