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作用域容易记错的两个地方分析
Jun 22 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
javascript 中的继承实例详解
May 05 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
vue中锚点的三种方法
Jul 06 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python写的一个简单监控系统
2015/06/19 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python实现飞机大战
2018/09/11 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电