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中令你抓狂的魔术变量
Nov 30 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现两点之间画线的方法
May 12 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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独立Session数据库存储操作类分享
2014/06/11 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
js定时器实例分享
2016/12/20 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
如何利用python进行时间序列分析
2020/08/04 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
高中体育教学反思
2014/01/24 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
考察现实表现材料
2014/05/19 职场文书
小学学校评估方案
2014/06/08 职场文书
工作保证书
2015/01/17 职场文书
打架检讨书范文
2015/01/27 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js