手把手教你做一个原生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元素

 

 

 

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>鼠标拖动小方块</title>
		<style type="text/css">
			.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;
			}
		</style>
	</head>

	<body>
		<center>
			<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
		</center>
		<div id="lineDiv" class="lineDiv">
			<div id="minDiv" class="minDiv">
				<div id="vals" class="vals">0</div>
			</div>
		</div>
		<script>
			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
					};
				}
			}
		</script>
	</body>

</html>

  兼容PC端和移动端:

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>鼠标拖动小方块</title>
		<style type="text/css">
			.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;
			}
		</style>
	</head>

	<body>
		<center>
			<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
		</center>
		<div id="lineDiv" class="lineDiv">
			<div id="minDiv" class="minDiv">
				<div id="vals" class="vals">0</div>
			</div>
		</div>
		<script>
			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
					};
				}
			}
		</script>
	</body>

</html>

  

posted @ 2016-12-25 18:03  最骚的就是你  阅读(15883)  评论(3编辑  收藏  举报