滑动登录
鼠標點擊拖動滑塊即可快速完成登錄。
程序分析：
效果圖演示
初始頁面
點擊滑塊進行拖動
此時的你是不是急于想實現(xiàn)它呢？？？
代碼演示
<!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";}}/*設(shè)置滑塊點擊事件*/touch_bar.onmousedown = function(ev) {isTouch = true;startX = event.clientX;}/*設(shè)置滑塊鼠標點擊取消事件*/touch_bar.onmouseup = function(ev) {isTouch = false;startX = 0;touch_bar.style.left = "0px";textnew.style.width = "0px";}/*設(shè)置滑塊鼠標移出事件*/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>總結(jié)
- 上一篇： 北信源管理网页卸载密码_Homebrew
- 下一篇： java - 条件嵌套