php移动端可拖动可视化,原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】...

本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能。分享给大家供大家参考，具体如下：

废话少说：

在PC端可以用mousedown来触发一个滑块滑动的效果，但在手机上，貌似无法识别这个事件，但手机上有touchstart事件，可以通过一系列“touch”事件来替代PC端的“mouse”事件。

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY:      //触摸点相对浏览器窗口的位置

pageX / pageY:       //触摸点相对于页面的位置

screenX  /  screenY:    //触摸点相对于屏幕的位置

identifier:        //touch对象的ID

target:       //当前的DOM元素

鼠标拖动小方块

.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

};

}

}

兼容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

};

}

}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。