canrun
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery实现菜单点击隐藏</title>
6 <script type="text/javascript" src="http://zjmainstay.cn/jquery/jquery-1.6.2.min.js"></script>
7 <script>
8 $(document).ready(function () {
9 //eg.1
10 $('#menu-1').menuToggle({
11 'ctrlBtn':'ctrl-btn-1',
12 'speed':400,
13 'width':400,
14 });
15 //eg.2
16 $('#menu-2').menuToggle({
17 'ctrlBtn':'ctrl-btn-2',
18 'speed':300,
19 'width':400,
20 'openText':'<<展开',
21 'closeText':'关闭>>',
22 });
23 //eg.3
24 $('#menu-3').menuToggle({
25 'ctrlBtn':'ctrl-btn-3',
26 'speed':300,
27 'height'基于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 _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>
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，这样是无法识别的。
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"。
function moveTo(start,end){
var _startX = getPosition(_btn);
var _endX = nearList(end);
_btn.style.left = _endX - 76 + "px";
}
四、效果事件：
1、给控件bar添加点击事件，让小圆点跳到正确的地方：
_bar.onclick = function(e){
moveTo(0,e.clientX);
}
2、给小圆点添加拖拽事件。
drag事件，是用onmousedown，onmouseup，onmousemove三个事件，加上一个isdrag开关来实现的。
具体实现方式是：
开关先关掉isdrag=false；
当鼠标按下onmousedown，触发开关isdrag=true；
然后开始拖动onmousemove；
当鼠标松开onmouseup时，关掉开关isdrag=false。
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阅读更多内容
没有评论:
发表评论