<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-1.12.4.min.js"></script>
<!-- 导入jquery的ui -->
<script src="../js/jquery-ui.min.js"></script>
<Script>
$(function name(params) {
$(".dragbar").draggable({
//限制只能x轴移动
axis: "x",
// 只能容器com里面拖动 限制只能在父级里面拖动
containment: "parent",
//设置拖动时 拖动的东西透明
opacity:0.8,
//拖拽开始时触发 start 事件,拖拽期间触发 drag 事件,拖拽停止时触发 stop 事件。
drag:function (ev,ui) {
console.log(ui)
//x轴距离 左边的距离 {"position": {left: 2},"position":{top: 0}}
// document.title=ui.position.left;
var nowleft = ui.position.left
//显示滑块上面的数值
$(".slide_count1").show()
//拖动时显示的数值 除以滑动长度600-滑块30
$(".slide_count").val(parseInt(100*nowleft/570)+"%")
$(".slide_count1").val(parseInt(100*nowleft/570)+"%")
//拖动时经过的路径
$(".slidebar .porgress").css({"width": nowleft +30})
拖动时滑块上面显示的数值的文本位置
$(".slide_count1").css({"left": nowleft +3})
//拖动时滑块变成 绿色
$(".dragbar").css({ "background": "green"})
//点击滑块y轴还是会移动 固定top为0
ui.position.top=0
},
stop:function(){
//还原滑块颜色
$(".dragbar").css({ "background": "gold" })
//500ms后 隐藏滑块上面的数值
window.setTimeout("$('.slide_count1').hide()",500)
}
})
})
</Script>
<style>
.slidebar_con {
width: 660px;
height: 32px;
margin: 50px auto 0;
/* border: 1px solid black; */
}
/* 滑动的长框 */
.slidebar{
width: 600px;
height: 30px;
border: 1px solid red;
/* 靠左悬浮 */
float:left;
/* 相对固定 元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移 */
position:relative;
/* 设置半圆 */
border-radius:30px
}
/* 滑块 */
.slidebar .dragbar{
width: 30px;
height: 30px;
background: gold;
/* 生成绝对定位元素,元素脱离文档流,不占据文档流的位置 */
position: absolute;
left: 0;
top: 0;
border-radius:30px
}
/* 滑动经过的地方 */
.slidebar .porgress{
width: 0px;
height: 30px;
background:#f0f0f0;
position:absolute;
left:0;
top:0;
border-radius:30px
}
/* 显示百分比 */
.slide_count{
/* 间距 */
padding:0;
/* 靠右边悬浮 */
float:right;
width:50px;
height:30px;
border:1px solid red;
text-align:center;
font-size:16px;
/* 设置圆角 */
border-radius:30px;
/* 清除背景色的灰色 */
background: none;
}
/* 显示百分比 */
.slide_count1{
/* 间距 */
width: 40px;
height: 10px;
padding:0;
position: absolute;
top: -15px;
left: 10px;
background: none;
border: none;
}
</style>
</head>
<body>
<div class="slidebar_con">
<div class="slidebar">
<div class="porgress"></div>
<div class="dragbar"></div>
<input type="text" class="slide_count1" value="" disabled="disabled">
</div>
<!-- disabled="disabled" 禁止输入和获取焦点 背景色会变为灰色 -->
<input type="text" class="slide_count" value="0" disabled="disabled">
</div>
</body>
</html>
jquery UI 拖动 滑动条
最新推荐文章于 2022-03-07 21:47:47 发布