javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:52:37

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧:經(jīng)常在網(wǎng)站別人的網(wǎng)站的注冊頁中看到一個拖拽驗(yàn)證的效果，就是它的驗(yàn)證碼剛開始不出來，而是有一個拖拽的條，你必須將這個拖拽條拖到底，驗(yàn)證碼才出來，說了感覺跟沒說一樣，你還是不理解，好吧，我給個圖你看看：這個是在萬網(wǎng)的注冊頁中所截的圖，大概的效

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧:經(jīng)常在網(wǎng)站別人的網(wǎng)站的注冊頁中看到一個拖拽驗(yàn)證的效果，就是它的驗(yàn)證碼剛開始不出來，而是有一個拖拽的條，你必須將這個拖拽條拖到底，驗(yàn)證碼才出來，說了感覺跟沒說一樣，你還是不理解，好吧，我給個圖你看看：這個是在萬網(wǎng)的注冊頁中所截的圖，大概的效

經(jīng)常在網(wǎng)站別人的網(wǎng)站的注冊頁中看到一個拖拽驗(yàn)證的效果，就是它的驗(yàn)證碼剛開始不出來，而是有一個拖拽的條，你必須將這個拖拽條拖到底，驗(yàn)證碼才出來，說了感覺跟沒說一樣，你還是不理解，好吧，我給個圖你看看：

這個是在萬網(wǎng)的注冊頁中所截的圖，大概的效果就是，當(dāng)拖動那個拖拽框時，如果拖拽框沒有拖到最右邊，則拖拽框會移動到初始位置，如果拖動到最右邊，則拖拽框顯示為對勾，中間的文字也變了，但是我試了一下，他的驗(yàn)證碼的框沒有出來，不知道是改了還是怎么的，我沒有繼續(xù)點(diǎn)擊確定往下進(jìn)行，那不是我們要講的重點(diǎn)，我就在他的代碼中把那個驗(yàn)證的框手動顯示出來了，也就是gif最后的幾幀中的畫面，這樣講，應(yīng)該懂我要講的是什么意思吧，沒錯，我們今天要實(shí)現(xiàn)的就是這個拖拽驗(yàn)證的效果，拖拽后的驗(yàn)證框我們就不做了

看看我們做的效果：

gif圖感覺有點(diǎn)卡，實(shí)際效果要流暢一些，看看效果基本上無差吧，具體實(shí)現(xiàn)原理我就不講了，如果還不知道怎么實(shí)現(xiàn)的同學(xué)，可以出門往左轉(zhuǎn)，找到我寫的一篇：javascript實(shí)現(xiàn)PC網(wǎng)頁里的拖拽效果，里面寫的比較清楚，掌握拖拽的基本原理，實(shí)現(xiàn)這樣的效果

那就是小菜一碟了，哈哈，那我就把代碼貼出來給大家看看，僅供參考：

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：


 
 
 請按住滑塊，拖動到最右邊

JavaScript：

參數(shù)說明：

這里給了5個參數(shù)，obj,parentNode,bgObj,oTxt,endFn

obj：表示拖拽對象

parentNode：表示拖拽對象活動區(qū)域，一般設(shè)為父級

bgObj：表示拖拽時的背景顏色變化的對象

oTxt：表示文本變化對象

endFn：返回函數(shù)，非必填

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：應(yīng)用示例 javascript

熱門焦點(diǎn)

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧

最新推薦

猜你喜歡

熱門推薦