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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
js使用心得分享
Jan 13 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
JS实现随机点名器
Apr 12 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php生成短域名函数
2015/03/23 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
Vue filters过滤器的使用方法
2017/07/14 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python定时执行之Timer用法示例
2015/05/27 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
技术总监管理职责范本
2014/03/06 职场文书
委托书怎么写
2014/07/31 职场文书
学校食堂标语
2014/10/06 职场文书
师德承诺书
2015/01/20 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
素质教育学习心得体会
2016/01/19 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python