效果如下，可以拖动滑块，数字显示的是离左侧距离：
代码如下，需要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>
时间： 2024-10-07 01:40:29