UDN-企业互联网技术人气社区

板块导航

浏览  : 371
回复  : 2

[原生js] 手把手教你做一个原生js拖动滑块

[复制链接]
泡泡兔的头像 楼主
发表于 2017-1-4 15:18:46 | 显示全部楼层 |阅读模式
  废话少说:
1.gif

  在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元素
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">

  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.                 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.                 <title>鼠标拖动小方块</title>
  7.                 <style type="text/css">
  8.                         .lineDiv {
  9.                                 position: relative;
  10.                                 height: 5px;
  11.                                 background: red;
  12.                                 width: 300px;
  13.                                 margin: 50px auto;
  14.                         }
  15.                         
  16.                         .lineDiv .minDiv {
  17.                                 position: absolute;
  18.                                 top: -5px;
  19.                                 left: 0;
  20.                                 width: 15px;
  21.                                 height: 15px;
  22.                                 background: green;
  23.                                 cursor: pointer
  24.                         }
  25.                         
  26.                         .lineDiv .minDiv .vals {
  27.                                 position: absolute;
  28.                                 font-size: 20px;
  29.                                 top: -45px;
  30.                                 left: -10px;
  31.                                 width: 35px;
  32.                                 height: 35px;
  33.                                 line-height: 35px;
  34.                                 text-align: center;
  35.                                 background: blue;
  36.                         }
  37.                         
  38.                         .lineDiv .minDiv .vals:after {
  39.                                 content: "";
  40.                                 width: 0px;
  41.                                 height: 0px;
  42.                                 border-top: 6px solid blue;
  43.                                 border-left: 6px solid transparent;
  44.                                 border-right: 6px solid transparent;
  45.                                 border-bottom: 6px solid transparent;
  46.                                 display: block;
  47.                                 margin-left: 11px;
  48.                         }
  49.                 </style>
  50.         </head>

  51.         <body>
  52.                 <center>
  53.                         <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
  54.                 </center>
  55.                 <div id="lineDiv" class="lineDiv">
  56.                         <div id="minDiv" class="minDiv">
  57.                                 <div id="vals" class="vals">0</div>
  58.                         </div>
  59.                 </div>
  60.                 <script>
  61.                         window.onload = function() {

  62.                                 var lineDiv = document.getElementById('lineDiv'); //长线条
  63.                                 var minDiv = document.getElementById('minDiv'); //小方块
  64.                                 var msg = document.getElementById("msg");
  65.                                 var vals = document.getElementById("vals");
  66.                                 var ifBool = false; //判断鼠标是否按下

  67.                                 //鼠标按下方块
  68.                                 minDiv.addEventListener("touchstart", function(e) {
  69.                                         e.stopPropagation();
  70.                                         ifBool = true;
  71.                                         console.log("鼠标按下")
  72.                                 });

  73.                                 //拖动
  74.                                 window.addEventListener("touchmove", function(e) {
  75.                                         console.log("鼠标拖动")
  76.                                         if(ifBool) {
  77.                                                 var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x
  78.                                                 var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
  79.                                                 var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值
  80.                                                 if(minDiv_left >= lineDiv.offsetWidth - 15) {
  81.                                                         minDiv_left = lineDiv.offsetWidth - 15;
  82.                                                 }
  83.                                                 if(minDiv_left < 0) {
  84.                                                         minDiv_left = 0;
  85.                                                 }
  86.                                                 //设置拖动后小方块的left值
  87.                                                 minDiv.style.left = minDiv_left + "px";
  88.                                                 msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  89.                                                 vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  90.                                         }
  91.                                 });
  92.                                 //鼠标松开
  93.                                 window.addEventListener("touchend", function(e) {
  94.                                         console.log("鼠标弹起")
  95.                                         ifBool = false;
  96.                                 });
  97.                                 //获取元素的绝对位置
  98.                                 function getPosition(node) {
  99.                                         var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
  100.                                         var top = node.offsetTop;
  101.                                         current = node.offsetParent; // 取得元素的offsetParent
  102.                                           // 一直循环直到根元素
  103.                                           
  104.                                         while(current != null) {  
  105.                                                 left += current.offsetLeft;  
  106.                                                 top += current.offsetTop;  
  107.                                                 current = current.offsetParent;  
  108.                                         }
  109.                                         return {
  110.                                                 "left": left,
  111.                                                 "top": top
  112.                                         };
  113.                                 }
  114.                         }
  115.                 </script>
  116.         </body>

  117. </html>
复制代码

相关帖子

发表于 2017-1-4 15:19:17 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“不悔“
使用道具 举报

回复

发表于 2017-1-4 15:19:19 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部