前端JS——滑动滑块验证登录（源码及效果）
生活随笔
收集整理的這篇文章主要介紹了
前端JS——滑动滑块验证登录（源码及效果）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
源碼:
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>.box{position: relative;width: 300px;height: 34px;background: #e8e8e8;border-radius: 4px;left: 20px; } .btn{position: absolute;top: 0;width: 40px;height:32px;text-align: center;line-height: 32px;border-radius: 4px;z-index: 3;background-color: #fff;border: 1px solid #ccc;color: black;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; } .text{position: absolute;width: 100%;margin: 0;text-align: center;line-height: 34px;display: block;z-index: 2;/*-webkit-margin-before: 1em;-webkit-margin-after: 1em;*/-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; } .bg{position: absolute;height: 100%;background-color: yellowgreen;z-index: 1; }</style></head><body><div class="box"><!--滑塊--><div id="a" class="btn">>></div><!--文字--><p id="b"class="text">拖動滑塊驗證</p><!--背景--><div id="c"class="bg"></div> </div></body><script>//原生寫法 window.onload=function(){var btn=document.querySelector(".btn");var box=document.querySelector(".box");var bg=document.querySelector(".bg");var text=document.querySelector(".text");a.onmouseover = function(){this.style.cursor = 'pointer';}b.onmouseover = function(){this.style.cursor = 'pointer';}c.onmouseover = function(){this.style.cursor = 'pointer';}//封裝選擇器 // function $(name){ // return document.querySelector(name); // }; // var box=$(".box"),btn=$(".btn").....;var flag=false;//按下onmousedown 拖動onmousemove//document.querySelector(".btn").onmousedown=function(event){//event事件狀態 // var e=event||window.event;//獲取方法集合，可直接通過id, 類, 類型, 屬性, 屬性值等來選取元素（返回此名字的第一個）。btn.onmousedown=function(e){//按下var downX=e.clientX; //按下后對x軸的距離 // console.log(downX); // alert("1");btn.onmousemove=function(e){//拖動var moveX=e.clientX-downX; //拖動后與x軸距離減去初始值距離，移動值 // console.log(moveX);//移動范圍if(moveX>-2){this.style.left=moveX+"px";//將移動值賦值給滑塊bg.style.width=moveX+"px";//背景if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始寬度內邊距邊框，不包含外邊框//拖到頭，驗證成功flag=true;text.innerHTML="驗證成功";text.style.color="white";//事件清除btn.onmousedown=null;btn.onmousemove=null;}}}}//松開按鈕btn.onmouseup=function(){ //事件清除btn.onmousemove=null;if(flag)return;this.style.left=0;//將移動值賦值給滑塊bg.style.width=0;//背景} }</script> </html>總結
以上是生活随笔為你收集整理的前端JS——滑动滑块验证登录（源码及效果）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： function $(id) {}表示什
- 下一篇： js基础--获取浏览器当前页面的滚动条高