地图的展示都会涉及到级别的切换，百度、google、esri地图服务、bing等，都有自己的鱼骨控件实现地图级别的设置。
map和control互动的控件，原理为：
- 点击红框内位置，滑块切换级别定位，调用zoom，然后map跟着进行缩放
- 拖动滑块，mouseup时滑块切换级别定位（滑动效果），调用zoom，然后map跟着进行缩放
- map缩放，获取map的缩放级别level，然后对控件进行相应的修改（滑动至相应级别）
最近工作中遇到鱼骨控件的问题，做以下分析。
1. 制作鱼骨控件的方法
1). jquery UI的库，早期计划使用该方法，但考虑到库过大最后放弃；
2). html5控件range，目前使用该方法，绑定change事件实现level的切换，当然不支持拖动效果，其他还是ok的，但是ie等浏览器不支持，所以只是暂时可行；
$("<input type=\"range\"/>")
.css("width", "20px")
.css("height", "200px")
.attr("max", lods.length - 1)
.attr("min", 0)
.attr("step", 1)
.attr("value", level)
.css("-webkit-appearance", "slider-vertical")
.bind("change", function (evt, ul) {
})
3).从网上找第三方控件包装后，修改样式等可以使用，但是发现找不到；
4).自定义鱼骨控件,已经实现了，下面分享一些心得。
2.自定义鱼骨控件的规则
滑块沿线拖动
鱼骨有刻度（间隔固定&总长度根据地图lods可变）
拖动过程中无级
停止时有级
3.基本思路
1). 红色边框定义为<div></div>，绑定mousedown事件、mouseup事件。
2). 滑块为<img/>元素，绑定mousedown事件。
3). 地图鱼控件要互动，即地图缩放时控件重新定位、控件有新位置时地图做相应缩放。
4). body绑定mousemove和mouseup事件，因为当事件为滑块拖动时，mousedown触发后，只要没有处于move状态没有up，无论鼠标在页面的什么位置都应该能监听到滑块的移动事件。（具体可以参考百度、谷歌地图效果）
5). 记录鼠标的offsetX、offsetY和pageX、pageY，来计算滑块的新位置。
4.解决方案
1）点击红色div，滑块定位
div绑定mousedown、mouseup，mousedown时记录鼠标点击处的offsetY位置和pageY1；
body的mouseup判断鼠标up的点pageY2与pageY1的差值，因为红色div的长度是根据lods生成的，因而判断pageY差值和滑块初始位置的关系，使用offsetY判断最适级别，就可以区分三种状态：滑块在最大级别、最小级别、中间某级别，分别根据滑块的absolute定位的top属性来定义位置。
2）滑块拖动后定位
滑块绑定mousedown事件，记录当前滑块位置和pageY1
body的mousemove是事件，根据当前鼠标点pageY2和pageY1差值，根据此差值和最初滑块位置区分三种状态，并绝对定位滑块位置。
ps:
div相对定位&滑块绝对定位；
div的宽度为23px；以小图片
根据lods填充，图片是一个对称图形，保证填充时鱼骨连续；
根据lods填充，图片是一个对称图形，保证填充时鱼骨连续； img滑块图片
；
； 此处只介绍思路，就不附代码了，有不详尽的可以再作讨论！