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 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
js实现购物车功能
Jun 12 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue resource发送请求的几种方式
Sep 30 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实现小型站点广告管理(修正版)
2006/10/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP安全配置详细说明
2011/09/26 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python操作 hbase 数据的方法
2016/12/18 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python 修改本地网络配置的方法
2019/08/14 Python
python与js主要区别点总结
2020/09/13 Python
父母对孩子说的话
2014/04/12 职场文书
就业协议书怎么填
2014/09/15 职场文书
上班迟到检讨书
2015/05/06 职场文书
单位考核鉴定意见
2015/06/05 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python