效果如下，可以拖动滑块，数字显示的是离左侧距离：
代码如下，需要jquery和jquery-ui库，请从官网上下载
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery.js"></script> <script src="jquery-ui.min.js"></script> <style> *{ margin: 0; padding: 0; } body { width: 1110px; margin: 200px auto; } .box { width: 800px; height: 40px; border: 1px solid #696969; position: relative; } .movebox { width: 100px; height: 50px; background: #ccc; cursor: pointer; box-shadow: 0px 5px 5px darkblue; position: absolute; top: -5px; } </style> <script> $(function() { $(".movebox").draggable({ axis: "x", containment: "parent", drag: function(evnet, ui){ $("h1").text(ui.position.left); } }); }); </script> </head> <body> <h1>0</h1> <div class="box"> <div class="movebox"></div> </div> </body> </html>
原文：http://www.cnblogs.com/lunawzh/p/4497978.html