Jquery实现拖动条

来源：互联网发布：mac怎样下载刀塔编辑：程序博客网时间：2024/06/04 17:41

需要给web添加一个水平拖动条，起初认为网上应该这样的jquery一大把，随便搜搜就可以了。去搜了下，果然一大把，嘿嘿。发现目标的下一步就是down下来，然后一个一个试，哪个好就用啦，试了一圈，结果往往会发生悲剧的事情：没有一个是满意的。不过庆幸的是，可以借鉴下别人的经验，虽然有点浪费时间，却也学到了不少。

其实要实现拖动效果也是很容易的事情，弄两个层，一个为背景，一个在上面拖动，计算下位置就可以了，如果有需要的话，传个参数过去，加点动画效果，让它可以接受参数移动。其实我需要的就是这样的效果，哈哈。

代码没有几行，效果也很一般，起码实现功能了，要美化的自己美化去，哈哈。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .dragbar{height:20px;background:#ddd;}.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}</style><mce:script type="text/javascript" src="jquery-1.2.3.js" mce_src="jquery-1.2.3.js"></mce:script><mce:script type="text/javascript"></mce:script></head><body><div class="dragbar"><div class="draghandle"></div> </div></body></html>