拖动滑块css,基于JavaScript实现拖动滑块效果

本文实例为大家分享了js拖动滑块效果的具体代码，供大家参考，具体内容如下

效果：

代码：

鼠标拖动小方块

.lineDiv {

position: relative;

height: 5px;

background: red;

width: 300px;

margin: 50px auto;

}

.lineDiv .minDiv {

position: absolute;

top: -5px;

left: 0;

width: 15px;

height: 15px;

background: green;

cursor: pointer

}

.lineDiv .minDiv .vals {

position: absolute;

font-size: 20px;

top: -45px;

left: -10px;

width: 35px;

height: 35px;

line-height: 35px;

text-align: center;

background: blue;

}

.lineDiv .minDiv .vals:after {

content: "";

width: 0px;

height: 0px;

border-top: 6px solid blue;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid transparent;

display: block;

margin-left: 11px;

}

用鼠标拖动小方块0%

0

window.onload = function() {

var lineDiv = document.getElementById('lineDiv'); //长线条

var minDiv = document.getElementById('minDiv'); //小方块

var msg = document.getElementById("msg");

var vals = document.getElementById("vals");

var ifBool = false; //判断鼠标是否按下

//鼠标按下方块

minDiv.addEventListener("touchstart", function(e) {

e.stopPropagation();

ifBool = true;

console.log("鼠标按下")

});

//拖动

window.addEventListener("touchmove", function(e) {

console.log("鼠标拖动")

if(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; //小方块相对于父元素(长线条)的left值

if(minDiv_left >= lineDiv.offsetWidth - 15) {

minDiv_left = lineDiv.offsetWidth - 15;

}

if(minDiv_left < 0) {

minDiv_left = 0;

}

//设置拖动后小方块的left值

minDiv.style.left = minDiv_left + "px";

msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);

vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);

}

});

//鼠标松开

window.addEventListener("touchend", function(e) {

console.log("鼠标弹起")

ifBool = false;

});

//获取元素的绝对位置

function getPosition(node) {

var left = node.offsetLeft; //获取元素相对于其父元素的left值var left

var top = node.offsetTop;

current = node.offsetParent; // 取得元素的offsetParent

// 一直循环直到根元素

while(current != null) {

left += current.offsetLeft;

top += current.offsetTop;

current = current.offsetParent;

}

return {

"left": left,

"top": top

};

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。