<>强拖动滑块效果:
先看看效果图:
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt; title> Document
& lt;脚本type=" text/javascript " src="祝辞& lt;/script>
& lt;风格类型=" text/css "比;
输入(type="范围"]{
宽度:80%;
背景颜色:红色;
border - radius: 15 px;
-webkit-appearance:没有;
身高:1 px;
位置:相对;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
输入(type="范围"]::-webkit-slider-thumb {
-webkit-appearance:没有;
背景颜色:绿色;
这个特性:50%;
高度:30 px;
宽度:30 px;
不必:0 1 px 3 px rgba (0, 0, 0。4);
边界:没有;
位置:相对;
z - index: 10;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$ (" .input_1 ") .change(函数(){
$ (“p.p1”)。text($(这).val ());
})
setInterval(函数(){
$ (" p.p2”)。text ($ (“.input_2”) .val ());
},0.01)
})
& lt;/script>
& lt;/head>
& lt; body>
& lt; p>添加改变事件& lt;/p>
& lt;输入类型=胺段А币徊?" 0.01 " min=" 0 " max=" 5 " value=" https://www.yisu.com/zixun/0 "比;
& lt; p> 0 & lt;/p>
& lt; p>添加定时器& lt;/p>
& lt;输入类型=胺段А币徊?" 0.01 " min=" 0 " max=" 5 " value=" https://www.yisu.com/zixun/0 "比;
& lt; p> 0 & lt;/p>
& lt;/body>
& lt;/html>
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt; title>鼠标拖动小方块& lt;/title>
& lt;风格类型=" text/css "比;
.lineDiv {
位置:相对;
身高:5 px;
背景:红色;
宽度:300 px;
保证金:50 px汽车;
}
.lineDiv .minDiv {
位置:绝对的;
上图:5 px;
左:0;
宽度:15 px;
高度:15 px;
背景:绿色;
光标:指针
}
.lineDiv .minDiv .vals {
位置:绝对的;
字体大小:20 px;
前:-45像素;
左:-10 px;
宽度:35 px;
高度:35 px;
行高:35 px;
text-align:中心;
背景:蓝色;
}
.lineDiv .minDiv .vals:{后
内容:“”;
宽度:0 px;
高度:0 px;
border-top: 6 px固体蓝色;
border-left: 6 px固体透明;
边境:6 px固体透明;
边界底部:6 px固体透明;
显示:块;
margin-left: 11 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; center>
& lt; h4>用鼠标拖动小方块& lt;跨度id=拔毒痹? & lt;/span> % & lt;/h4>
& lt;/center>
& lt; div id=發ineDiv”比;
& lt; div id=癿inDiv”比;
& lt; div id=皏al”在0 & lt;/div>
& lt;/div>
& lt;/div>
& lt; script>
窗口。onload=function () {
var lineDiv=. getelementbyid (“lineDiv”);//长线条
var minDiv=. getelementbyid (“minDiv”);//小方块
var味精=. getelementbyid(“味精”);
var vals=. getelementbyid (“val”);
var ifBool=false;//判断鼠标是否按下//鼠标按下方块
minDiv。addEventListener (“touchstart函数(e) {
e.stopPropagation ();
ifBool=true;
console.log(“鼠标按下”)
})；//拖动
窗口。addEventListener (“touchmove函数(e) {
console.log(“鼠标拖动”)
如果(ifBool) {
var x=e.touches [0]。pageX | | e.touches [0] .clientX;//鼠标横坐标var x
var lineDiv_left=getPosition (lineDiv) .left;//长线条的横坐标
var minDiv_left=x - lineDiv_left;//小方块相对于父元素(长线条)的左值
如果(minDiv_left祝辞=lineDiv。offsetWidth - 15) {
minDiv_left=lineDiv。offsetWidth - 15;
}
如果(minDiv_left & lt;0) {
minDiv_left=0;
}//设置拖动后小方块的左值
minDiv.style。左=minDiv_left +“px”;
味精。innerText=方法(实现(minDiv_left/(lineDiv。offsetWidth - 15)) * 100);
瓦尔斯。innerText=方法(实现(minDiv_left/(lineDiv。offsetWidth - 15)) * 100);
}
})；//鼠标松开
窗口。addEventListener (“touchend函数(e) {
console.log(“鼠标弹起”)
ifBool=false;
})；//获取元素的绝对位置
函数getPosition(节点){
var左=node.offsetLeft;//获取元素相对于其父元素的左值var
var=node.offsetTop最高;
当前=node.offsetParent;//取得元素的offsetParent//一直循环直到根元素
而(当前!=null) {
左+=current.offsetLeft;
前+=current.offsetTop;
当前=current.offsetParent;
}
返回{
“左”:左,
“顶级”:上面
};
}
}
& lt;/script>
& lt;/body>
& lt;/html>
