基於webview的選擇滑動控制元件（PC和wap版）

酸奶小妹發表於2013-07-12

WebView控制元件

有了webview，大家開發ios或者安卓的app就方便很多啦。

第一可以增量更新；

第二webview可以同時相容ios和安卓，減少開發量哦。

----------------------------------------------------

下面詳細解說，一個webview的滑動控制元件是如何製作的。

----------------------------------------------------

效果說明：

1、頁面展示效果為：

2、點選“距離”按鈕，彈出“選擇控制元件”

3、點選距離控制元件，或者拖動小圓點，都可以選擇合適的距離哦。

展示地址：http://zhaoziang.com/uiweb/selcontrol/list.htm

-------------------------------------------------------------

一、功能點：

1、點選控制元件，讓小圓點跳到正確位置

2、拖動小圓點，讓其跟隨，並停在正確的位置

二、設計思路：

設計三個函式，分別是：

1、獲取dom元素的當前位置。getPosition(_dom)

2、根據當前位置x，判斷小圓點懸停位置的一個附近列表，該控制元件有6個可以懸停的地方。nearList(x)

3、讓小圓點跳到正確位置的動畫效果。moveTo(start,end)

三、程式碼實現：

1、獲取dom元素的當前位置。getPosition(_dom)

輸入：傳入引數，dom元素。先獲取到dom元素。

    var _btn = document.getElementById("dragbtn");
    var _bar = document.getElementById("list_sel");

輸出：該dom元素的位置。

tips:

1) 注意需要使用parseInt，將獲取到的offsetLeft轉換為數字。而在使用數字的時候，記得要加上+"px“，這樣left屬性才能正確識別哦。

2) 這裡取元素的left值，使用dom.style.left，是取不到值的，應該使用offsetLeft。使用dom.style.left的場景，應該是left屬性寫在html裡的，像這樣<div style="left:10px"></div>

//1、getPosition(_dom)
    function getPosition(dom){
        _dom = dom;
        var _x = parseInt(_dom.offsetLeft);
        return _x + 18;
    }

2、根據當前位置x，判斷小圓點懸停位置的一個附近列表，該控制元件有6個可以懸停的地方。nearList(x)

這裡是，只需要修改起點_start ，和間隔_space。就能獲得整個附近列表的設計。這樣子不用每次都去修改N個地方的引數。

tips:

大於>，小於<，等於=，大於等於>=，小於等於<=都是二元操作符。所以在if判斷的時候，如果有兩個以上的判斷時，使用與&&符號來連線。就像：1<x && x<9。而不是寫成1<x<9，這樣是無法識別的。

//2、nearList
    function nearList(x){
        var _movetox = 0;
        var _start = 78; //起點
        var _space = 56; //兩點之間的間隔px        
        var _nearlist = [_start,
                        _start+_space,
                        _start+2*_space,
                        _start+3*_space,
                        _start+4*_space,
                        _start+5*_space];
        var _x = x;                    
        if(_x<=_nearlist[0]){
            _movetox = _nearlist[0];
        }
        else if(_nearlist[0]<_x && _x<=_nearlist[0]+_space/2){
            _movetox = _nearlist[0];
        }
        else if(_nearlist[1]-_space/2<_x && _x<=_nearlist[1]+_space/2){
            _movetox = _nearlist[1];
        }
        else if(_nearlist[2]-_space/2<_x && _x<=_nearlist[2]+_space/2){
            _movetox = _nearlist[2];
        }
        else if(_nearlist[3]-_space/2<_x && _x<=_nearlist[3]+_space/2){
            _movetox = _nearlist[3];
        }
        else if(_nearlist[4]-_space/2<_x && _x<=_nearlist[4]+_space/2){
            _movetox = _nearlist[4];
        }
        else if(_nearlist[5]-_space/2<_x && _x<=_nearlist[5]+_space/2){
            _movetox = _nearlist[5];
        }
        else if(_x>_nearlist[5]){
            _movetox = _nearlist[5];
        }
        return _movetox;
    }

3、讓小圓點跳到正確位置的動畫效果。moveTo(start,end)

起點_startX是dom元素的位置，終點_endX是根據附近列表選擇的。動畫效果，使用延時來修改left的值。

tips:

這裡獲得的位置，都是數字。所以需要加上+"px"。

//3、moveTo
    function moveTo(start,end){
        var _startX = getPosition(_btn);
        var _endX = nearList(end);
        _btn.style.left = _endX - 76 + "px";
    }

四、效果事件：

1、給控制元件bar新增點選事件，讓小圓點跳到正確的地方：

//點選bar的事件
    _bar.onclick = function(e){
        moveTo(0,e.clientX);
    }

2、給小圓點新增拖拽事件。

drag事件，是用onmousedown，onmouseup，onmousemove三個事件，加上一個isdrag開關來實現的。

具體實現方式是：

開關先關掉isdrag=false；

當滑鼠按下onmousedown，觸發開關isdrag=true；

然後開始拖動onmousemove；

當滑鼠鬆開onmouseup時，關掉開關isdrag=false。

//拖動btn的事件
    var _isdrag=false;
    var myX;
    var dobj;
    function movemouse(e){
        if (_isdrag)
        {
            dobj.style.left = tx + e.clientX - myX + "px";
            return false;
        }
    }
    function moving(e){
        var fobj = event.srcElement;
        if (fobj.id=="dragbtn"){
            _isdrag = true;
            dobj = fobj;
            tx = parseInt(dobj.style.left+0);
            myX = e.clientX;
            document.onmousemove = movemouse;
            return false;
        }
    }
    document.onmousedown = moving;
    document.onmouseup = function(e){
        _isdrag = false;
        moveTo(0,e.clientX);
    }