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

有了webview，你們開發ios或者安卓的app就方便不少啦。

第一能夠增量更新；

第二webview能夠同時兼容ios和安卓，減小開發量哦。

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

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

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

效果說明：

一、頁面展現效果爲：

 

二、點擊「距離」按鈕，彈出「選擇控件」

三、點擊距離控件，或者拖動小圓點，均可以選擇合適的距離哦。

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

 

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

1、功能點：

一、點擊控件，讓小圓點跳到正確位置

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

 

2、設計思路：

設計三個函數，分別是：

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

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

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

 

3、代碼實現：

一、獲取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>

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

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

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

tips:

大於>，小於<，等於=，大於等於>=，小於等於<=都是二元操做符。因此在if判斷的時候，若是有兩個以上的判斷時，使用與&&符號來鏈接。就像：1<x && x<9。而不是寫成1<x<9，這樣是沒法識別的。

//二、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; }

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

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

tips:

這裏得到的位置，都是數字。因此須要加上+"px"。

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

 

4、效果事件：

一、給控件bar添加點擊事件，讓小圓點跳到正確的地方：

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

二、給小圓點添加拖拽事件。

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); }

 

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

PC版：

DOM結構設計，CSS樣式，以及所有源代碼，請到展現地址查看：

http://zhaoziang.com/uiweb/selcontrol/list.htm

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

wap版：

 

手機瀏覽器上（指ios和android機器）的觸屏事件，與PC上的鼠標事件，有所對應，分別爲：

ontouchstart == onmousedown

ontouchend == onmouseup

ontouchmove == onmousemove

 

獲取元素位置的方法也有所不一樣：

e.touches[0].pageX == e.clientX

 

針對上述兩個不一樣，對於wap端，作了改進。

詳情請用手機瀏覽器訪問：http://zhaoziang.com/uiweb/selcontrol/index.htm