废话少说：

在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>

　　

手把手教你做一个原生js拖动滑块【兼容PC和移动端】的更多相关文章

  1. R数据分析：跟随top期刊手把手教你做一个临床预测模型

    临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...

  2. Vue+ElementUI: 手把手教你做一个audio组件

    目的 本项目的目的是教你如何实现一个简单的音乐播放器(这并不难) 本项目并不是一个可以用于生产环境的element播放器,所以并没有考虑太多的兼容性问题 本项目不是ElementUI的一个音频插件,只 ...

  3. 手把手教你做一个Shell命令窗口

    这是一个类似于win下面的cmd打开后的窗口,可以跨平台使用,可以在win和linux下面同时使用,主要功能如下: 首先我们需要把这些功能的目录写出来,通过写一个死循环,让其每次回车之后都可以保持同样 ...

  4. Android应用系列：手把手教你做一个小米通讯录（附图附源码）

    前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...

  5. netty系列之:小白福利！手把手教你做一个简单的代理服务器

    目录 简介 代理和反向代理 netty实现代理的原理 实战 总结 简介 爱因斯坦说过:所有的伟大,都产生于简单的细节中.netty为我们提供了如此强大的eventloop.channel通过对这些简单 ...

  6. 自己封装的一个原生JS拖动方法。

    代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...

  7. 手把手教你做一个python+matplotlib的炫酷的数据可视化动图

    1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...

  8. PWA入门：手把手教你制作一个PWA应用

    摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...

  9. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

随机推荐

  1. jquery之右下角消息提示框

    messager.js (function (jQuery) { var window; var obj = new Object(); obj.version = '@1.0'; obj.title ...

  2. php设计模式--单例模式

    单例模式(Singleton Pattern 单件模式或单元素模式) 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式是一种常见的设计模式,在计算机系统中,线程池.缓 ...

  3. max min 与 min max 的差别

    在求解最优化问题时,遇到一个对偶问题的转换:对于形如 的问题,可以转换为求解 即原问题的对偶问题.而在一般情况下: 对于这个为题的说明我参照http://math.stackexchange.com/ ...

  4. ros下多机器人系统(1)

    multi-robot system 经过两个多月的ros学习,对ros的认识有了比较深入的了解,本篇博客主要记录在ros下开发多机器人系统以及对ros更深入的开发.本篇博客是假定读者已经学习完了全部 ...

  5. MATLAB-octave中向量场图的可视化

    参考http://379910987.blog.163.com/blog/static/33523797201162223310546/ 设二维函数z=f(x,y),其中z为海拔,x为东西测向距离而y ...

  6. First Missing Positive && missing number

    https://leetcode.com/problems/first-missing-positive/ 我原以为数组中不会有重复的数字,所以利用min.max分别记录给定数组中出现的最小正整数和最 ...

  7. RichTextBox着色与着色不闪

    近来写的一个数据查询分析器意外的快捷,不到两晚工夫就搞定了.完成度相当的高.当然少不了关键字着色,不过着色的代码来自的网上,看了一下感觉过多的循环 //文本框改变事件 int index = this ...

  8. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  9. android ontouch事件分发机制

    最近开发一个项目中,banner图左右切换和下拉刷新手势有冲突,为此去研究了事件分发,网上资料一大抄,有些讲的不对有些讲的不全,结合了网上一些博文以及源码总结如下  一个完整的触摸事件包含down,m ...

  10. c# 根据文件流查看文件真实格式

    今天在做图片注册的功能的时候,测试提出一个问题:将随便一个非图片文件将后缀名改为jpg或其他,上传时应检验图片合法性.然后同事给提供了根据文件流前两个字节判断文件真实格式的思路,代码如下: publi ...