常常在網站別人的網站的註冊頁中看到一個拖曳驗證的效果,就是它的驗證碼剛開始不出來,而是有一個拖曳的條,你必須將這個拖曳條拖到底,驗證碼才出來,說了感覺跟沒說一樣,你還是不理解,好吧,我給個圖你看看:
這個是在萬網的註冊頁中所截的圖,大概的效果就是,當拖動那個拖曳框時,如果拖曳框沒有拖到最右邊,則拖曳框會移動到初始位置,如果拖曳到最右邊,則拖曳框顯示為對勾,中間的文字也變了,但是我試了一下,他的驗證碼的框沒有出來,不知道是改了還是怎麼的,我沒有繼續點擊確定往下進行,那不是我們要講的重點,我就在他的代碼中把那個驗證的框手動顯示出來了,也就是gif最後的幾幀中的畫面,這樣講,應該懂我要講的是什麼意思吧,沒錯,我們今天要實現的就是這個拖曳驗證的效果,拖曳後的驗證框我們就不做了
看看我們做的效果:
gif圖感覺有點卡,實際效果要流暢一些,看看效果基本上無差吧,具體實現原理我就不講了,如果還不知道怎麼實現的同學,可以出門往左轉,找到我寫的一篇:javascript實作PC網頁裡的拖曳效果 ,裡面寫的比較清楚,掌握拖曳的基本原理,實現這樣的效果
那就是小菜一碟了,哈哈,那我就把程式碼貼出來給大家看看,僅供參考:
css:
#drag_wrap{ width:300px; height:35px; position:relative; background:#e8e8e8; margin:100px auto; } #drag_bg{ width:0; height:35px; background:#7ac23c; position:absolute; top:0; left:0; } #drag_box{ width:40px; height:33px; border:1px solid #ccc; background:#fff url(images/rt.png) no-repeat center center; position:absolute; top:0; left:0; cursor:move; z-index:2; } #drag_txt{ width: 100%; height: 100%; text-align: center; position: absolute; z-index: 1; background: transparent; color: #9c9c9c; line-height: 35px; font-size: 12px; } #drag_txt span{ cursor: default; z-index: 0; } #drag_txt .startTxt{ background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: slidetounlock 3s infinite; -webkit-text-size-adjust: none; } @-webkit-keyframes slidetounlock { 0% { background-position: -200px 0 } 100% { background-position: 200px 0 } } .yseTxt{ background:none; color:#fff; }
html:
<div id="drag_wrap"> <div id="drag_bg"></div> <div id="drag_box"></div> <div id="drag_txt" ><span class="startTxt">请按住滑块,拖动到最右边</span></div> </div>
JavaScript:
window.onload = function(){ drag("drag_box","drag_wrap","drag_bg","drag_txt"); function drag(obj,parentNode,bgObj,oTxt,endFn){ var obj = document.getElementById(obj); var parentNode = document.getElementById(parentNode); var bgObj = document.getElementById(bgObj); var oTxt = document.getElementById(oTxt); var aSpan = oTxt.getElementsByTagName("span")[0]; obj.onmousedown = function(ev){ var ev = ev || event; //非标准设置全局捕获(IE) if(obj.setCapture){ obj.setCapture() }; var disX = ev.clientX - this.offsetLeft, disY = ev.clientY - this.offsetTop; var oWidth = obj.offsetWidth, oHeight = obj.offsetHeight; var pWidth = parentNode.offsetWidth, pHeight = parentNode.offsetHeight; document.onmousemove = function(ev){ var ev = ev || event; var left = ev.clientX - disX; //左侧 if(left <= 0){ left = 0; }else if(left >= pWidth - oWidth){//右侧 left = pWidth - oWidth; obj.style.background = "#fff url(images/yes.png) no-repeat center center"; aSpan.innerHTML = "验证通过"; //这里应该有ajax操作 aSpan.className = 'yseTxt'; }; obj.style.left = bgObj.style.width = left + 'px'; }; document.onmouseup = function(ev){ var ev = ev || event; document.onmousemove = document.onmouseup = null; //磁性吸附 var L = ev.clientX - disX; if(L < pWidth - oWidth){ startMove(obj,{left:0}); startMove(bgObj,{width:0}); }; endFn && endFn(); //非标准释放全局捕获(IE) if(obj.releaseCapture){ obj.releaseCapture() }; }; return false; }; } //这里是一个运动函数 function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; } } else{ iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr] - iCur)/5; iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')'; obj.style.opacity = (iCur + iSpeed)/100; } else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } },30); } //这里是获取css样式函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } }
參數說明:
這裡給了5個參數,obj,parentNode,bgObj,oTxt,endFn
obj:表示拖曳物件
parentNode:表示拖曳物件活動區域,一般設為父級
bgObj:表示拖曳時的背景顏色變化的物件
oTxt:表示文字變化物件
endFn:傳回函數,非必填
以上就是本文的全部內容,希望對大家的學習有所幫助。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

記事本++7.3.1
好用且免費的程式碼編輯器

Atom編輯器mac版下載
最受歡迎的的開源編輯器

WebStorm Mac版
好用的JavaScript開發工具

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境