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


Posted in Javascript onFebruary 16, 2017

本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下

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

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 #Javascript
基于JavaScript实现拖动滑块效果
Feb 16 #Javascript
js实现移动端微信页面禁止字体放大
Feb 16 #Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 #Javascript
js实现tab切换效果
Feb 16 #Javascript
jquery实现自适应banner焦点图
Feb 16 #Javascript
js 作用域和变量详解
Feb 16 #Javascript
You might like
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python反射和内置方法重写操作详解
2018/08/27 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python构造函数init实例方法解析
2020/01/19 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
户外活动策划方案
2014/03/12 职场文书
新学期教师寄语
2014/04/02 职场文书
奠基仪式策划方案
2014/05/15 职场文书
财务整改报告范文
2014/11/05 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
退货证明模板
2015/06/23 职场文书