首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js :怎么实现滑块

2013-08-26 
js :如何实现滑块hi,dear all ,向你们问个问题:已经用css+html写好如下滑块,怎么用js实现滑动效果?tks~Jav

js :如何实现滑块
    hi,dear all ,向你们问个问题:已经用css+html写好如下滑块,怎么用js实现滑动效果?
    js :怎么实现滑块

    tks~ JavaScript 滑块
[解决办法]
楼主可以搜一下关于js拖动的代码,思路大体上就是:
1.鼠标按下时(mousedown),将当前的滑块位置(css中top的值)和鼠标位置(在屏幕上的纵坐标位置pageY)记录下来,同时给滑块绑定鼠标移动事件函数;
2.鼠标移动时(mousemove),随着移动事件的发生,绑定的移动函数会不断的执行(每次具体执行过程为:计算当前pageY和之前记录下的pageY的差值,然后将“差值+之前记录的top值”得到当前滑块应该在的top值,最后将top值写到滑块的样式中。),滑块因为top不断变化,上下位置也就会不断变化。
3.鼠标松开时(mouseup),取鼠标消移动函数的绑定。
[解决办法]
http://jqueryui.com/slider/
你可以直接使用 jqueryui的slider
或者参看它的源代码修改成自己需要的

热点排行