Jquery实现拖动条

最新推荐文章于 2022-09-13 11:06:10 发布

vistang

最新推荐文章于 2022-09-13 11:06:10 发布

阅读量5.2k

点赞数

分类专栏：前端开发/web开发文章标签： jquery function xhtml class html 文档

本文链接：https://blog.csdn.net/vistang/article/details/6412502

版权

前端开发/web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需要给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>

vistang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Jquery实现拖动条

需要给web添加一个水平拖动条，起初认为网上应该这样的jquery一大把，随便搜搜就可以了。去搜了下，果然一大把，嘿嘿。发现目标的下一步就是down下来，然后一个一个试，哪个好就用啦，试了一圈，结果往往会发生悲剧的事情：没有一个是满意的。不过庆幸的是，可以借鉴下别人的经验，虽然有点浪费时间，却也学到了不少。其实要实现拖动效果也是很容易的事情，弄两个层，一个为背景，一个在上面拖动，计算下位置就可以了，如果有需要的话，传个参数过去，加点动画效果，让它可以接受参数移动。其实我需
复制链接

扫一扫

专栏目录