html移动端选择选择数字,js实现兼容PC端和移动端滑块拖动选择数字效果

鼠标拖动小方块

.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; //判断鼠标是否按下

//事件

var start = function(e) {

e.stopPropagation();

ifBool = true;

console.log("鼠标按下")

}

var move = function(e) {

console.log("鼠标拖动")

if(ifBool) {

if(!e.touches) { //兼容移动端

var x = e.clientX;

} else { //兼容PC端

var x = e.touches[0].pageX;

}

//var x = e.touches[0].pageX || e.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);

}

}

var end = function(e) {

console.log("鼠标弹起")

ifBool = false;

}

//鼠标按下方块

minDiv.addEventListener("touchstart", start);

minDiv.addEventListener("mousedown", start);

//拖动

window.addEventListener("touchmove", move);

window.addEventListener("mousemove", move);

//鼠标松开

window.addEventListener("touchend", end);

window.addEventListener("mouseup", end);

//获取元素的绝对位置

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

};

}

}