有了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、nearListfunction 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、moveTofunction 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);}

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

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

效果图：