JavaScript小實例:拖拽應用(二)

常常在網站別人的網站的註冊頁中看到一個拖拽驗證的效果,就是它的驗證碼剛開始不出來,而是有一個拖拽的條,你必須將這個拖拽條拖到底,驗證碼纔出來,說了感受跟沒說同樣,你仍是不理解,好吧,我給個圖你看看:javascript

這個是在萬網的註冊頁中所截的圖,大概的效果就是,當拖動那個拖拽框時,若是拖拽框沒有拖到最右邊,則拖拽框會移動到初始位置,若是拖動到最右邊,則拖拽框顯示爲對勾,中間的文字也變了,可是我試了一下,他的驗證碼的框沒有出來,不知道是改了仍是怎麼的,我沒有繼續點擊肯定往下進行,那不是咱們要講的重點,我就在他的代碼中把那個驗證的框手動顯示出來了,也就是gif最後的幾幀中的畫面,這樣講,應該懂我要講的是什麼意思吧,沒錯,咱們今天要實現的就是這個拖拽驗證的效果,拖拽後的驗證框咱們就不作了css

看看咱們作的效果:html

gif圖感受有點卡,實際效果要流暢一些,看看效果基本上無差吧,具體實現原理我就不講了,若是還不知道怎麼實現的同窗,能夠出門往左轉,找到我寫的一篇 : javascript小實例,PC網頁裏的拖拽 ,裏面寫的比較清楚,掌握拖拽的基本原理,實現這樣的效果java

那就是小菜一碟了,哈哈~~,(不吹牛會死啊,那我就把代碼貼出來給你們看看,僅供參考:web

css:ajax

 

#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:json

<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:ide

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,endFnpost

obj:表示拖拽對象

parentNode:表示拖拽對象活動區域,通常設爲父級

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

oTxt:表示文本變化對象

endFn:返回函數,非必填

 

這個效果的代碼是否是很眼熟啊,沒錯,這就是經過上一個拖拽實例變形而來,因此說這就是一通百通,(哎呀,你膨脹了,別炸羅),效果比較簡單,僅供你們參考,但願我提供的思路能給你們帶來更好的效果,好了,下面我將效果給你們看看:

http://runjs.cn/code/tzoj0vq6

 

今天就到這裏吧,後續我會給你們帶來更多的小實例,很少說了,行文倉促,若是有不對的地方或者是你們有更好的實現的方法,請多多指教,不勝感謝!

相關文章
相關標籤/搜索