基于JavaScript实现拖动滑块效果


Posted in Javascript onFebruary 16, 2017

本文实例为大家分享了js拖动滑块效果的具体代码,供大家参考,具体内容如下

效果:

基于JavaScript实现拖动滑块效果

代码:

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

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <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; //判断鼠标是否按下

    //鼠标按下方块
    minDiv.addEventListener("touchstart", function(e) {
     e.stopPropagation();
     ifBool = true;
     console.log("鼠标按下")
    });

    //拖动
    window.addEventListener("touchmove", function(e) {
     console.log("鼠标拖动")
     if(ifBool) {
      var x = e.touches[0].pageX || e.touches[0].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);
     }
    });
    //鼠标松开
    window.addEventListener("touchend", function(e) {
     console.log("鼠标弹起")
     ifBool = false;
    });
    //获取元素的绝对位置
    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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
js indexOf()定义和用法
Oct 21 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 #Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 #Javascript
js实现tab切换效果
Feb 16 #Javascript
jquery实现自适应banner焦点图
Feb 16 #Javascript
js 作用域和变量详解
Feb 16 #Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 #Javascript
js面向对象编程总结
Feb 16 #Javascript
You might like
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
Element Badge标记的使用方法
2020/07/27 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
区域总监的岗位职责
2013/11/21 职场文书
护士感人事迹
2014/05/01 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
爱情保证书
2015/01/17 职场文书
功夫熊猫观后感
2015/06/10 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
python3读取文件指定行的三种方法
2021/05/24 Python