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

《javascript拖拽應(yīng)用實(shí)例（二）_javascript技巧》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、javascript拖拽應(yīng)用實(shí)例（二）經(jīng)常在網(wǎng)站別人的網(wǎng)站的注冊(cè)頁(yè)中看到一個(gè)拖拽驗(yàn)證的效果，就是它的驗(yàn)證碼剛開(kāi)始不岀來(lái)，而是有一個(gè)拖拽的條，你必須將這個(gè)拖拽條拖到底，驗(yàn)證碼才出來(lái),說(shuō)了感覺(jué)跟沒(méi)說(shuō)一樣，你還是不理解，好吧，我給個(gè)圖你看看：*驗(yàn)證?I交酬塊'拖動(dòng)到最右邊回創(chuàng)建網(wǎng)站賬號(hào)的同時(shí)，我同意:《阿里云網(wǎng)站服務(wù)條款》「并且我同意阿里云按照網(wǎng)站服祭息r并SS時(shí)有權(quán)撒回該等同意。夢(mèng)阿里云可通過(guò)電話（包括語(yǔ)青通話、短信、或傳真）有針眾:/E艮務(wù)笛信息。確認(rèn)這個(gè)是在力?網(wǎng)的注冊(cè)頁(yè)中所截的圖，大概的效果就是，當(dāng)拖動(dòng)那個(gè)拖拽框時(shí)，如果拖拽框沒(méi)有拖到最右邊，則拖拽框會(huì)移動(dòng)到

2、初始位置，如果拖動(dòng)到最右邊，則拖拽框顯示為對(duì)勾，中間的文字也變了，但是我試了一下，他的驗(yàn)證碼的框沒(méi)冇出來(lái)，不知道是改了還是怎么的，我沒(méi)有繼續(xù)點(diǎn)擊確定往下進(jìn)行，那不是我們耍講的重點(diǎn)，我就在他的代碼屮把那個(gè)驗(yàn)證的框手動(dòng)顯示出來(lái)了，也就是gif最后的兒幀中的畫面，這樣講，應(yīng)該懂我要講的是什么意思吧，沒(méi)錯(cuò)，我們今天要實(shí)現(xiàn)的就是這個(gè)拖拽驗(yàn)證的效果，拖拽后的驗(yàn)證框我們就不做了看看我們做的效果：ii［住滑塊，拖動(dòng)到最右邊gif圖感覺(jué)冇點(diǎn)卡，實(shí)際效呆要流暢一些，看看效果基本上無(wú)差吧，具體實(shí)現(xiàn)原理我就不講了，如果還不知道怎么實(shí)現(xiàn)的同學(xué)，可以出門往左轉(zhuǎn)，找到我寫的一篇：javas

3、cript實(shí)現(xiàn)PC網(wǎng)頁(yè)里的拖拽效果,里面寫的比較清楚，掌握拖拽的基本原理，實(shí)現(xiàn)這樣的效果那就是小菜一碟了，哈哈，那我就把代碼貼出來(lái)給大家看看，僅供參考：#drag_wrap{width:300px;height:35px;position:relative;background:#c8c8c8;margin:lOOpxauto;}ttdragbg{width:O;height:35px;background:#7ac23c;position:absolute;top:0;left:0;}#drag_box{width:40px;height:33px;bord

4、er:lpxsolid#ccc;background:#fffurl(images/rt.png)no-repeatccnterccnter;position:absolute;top:0;left:0;cursor:move;z-index:2;}#drag_txt{width:100%;height:100%;tcxt-align:ccnter;position:absolute;z-index:1;background:transparent;color:#9c9c9c;line-height:35px;font-size:12px;}#drag_txt

5、span{cursor:default;z-index:0;#drag_txt.startTxt{background:-webkit-gradient(linear,lefttop,righttop,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-fi11-color:transparent;-webki

6、t-emimation:slidctounlock3sinfinitc;-webkit-text-size-adjust:none;}@-webkit-keyframesslidetounlock{0%{background-position:-200px0}100%{background-position:200px0}}?yseTxt{background:none;color:#fff;html：