经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
js拖动滑块和点击水波纹效果实例代码
来源：jb51　　时间：2018/10/17 8:45:24　　对本文有异议

拖动滑块效果：

先看看效果图：

  1. <!doctype html>
  2. <html>
  3.  
  4.  <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.   <title>Document</title>
  8.   <script type="text/javascript" src=""></script>
  9.  
  10.   <style type="text/css">
  11.    input[type="range"] {
  12.     width: 80%;
  13.     background-color: red;
  14.     border-radius: 15px;
  15.     -webkit-appearance: none;
  16.     height: 1px;
  17.     position: relative;
  18.     -webkit-box-sizing: border-box;
  19.     -moz-box-sizing: border-box;
  20.     box-sizing: border-box;
  21.    }
  22.  
  23.    input[type="range"]::-webkit-slider-thumb {
  24.     -webkit-appearance: none;
  25.     background-color: green;
  26.     border-radius: 50%;
  27.     height: 30px;
  28.     width: 30px;
  29.     box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  30.     border: none;
  31.     position: relative;
  32.     z-index: 10;
  33.    }
  34.   </style>
  35.   <script type="text/javascript">
  36.    $(function() {
  37.     $(".input_1").change(function() {
  38.      $("p.p1").text($(this).val());
  39.     })
  40.  
  41.     setInterval(function() {
  42.      $("p.p2").text($(".input_2").val());
  43.     }, 0.01)
  44.    })
  45.   </script>
  46.  </head>
  47.  
  48.  <body>
  49.   <p>添加change事件</p>
  50.   <input type="range" step="0.01" min="0" max="5" value="0">
  51.   <p>0</p>
  52.   <p>添加定时器</p>
  53.   <input type="range" step="0.01" min="0" max="5" value="0">
  54.   <p>0</p>
  55.  </body>
  56.  
  57. </html>

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <title>鼠标拖动小方块</title>
  8. <style type="text/css">
  9. .lineDiv {
  10. position: relative;
  11. height: 5px;
  12. background: red;
  13. width: 300px;
  14. margin: 50px auto;
  15. }
  16.  
  17. .lineDiv .minDiv {
  18. position: absolute;
  19. top: -5px;
  20. left: 0;
  21. width: 15px;
  22. height: 15px;
  23. background: green;
  24. cursor: pointer
  25. }
  26.  
  27. .lineDiv .minDiv .vals {
  28. position: absolute;
  29. font-size: 20px;
  30. top: -45px;
  31. left: -10px;
  32. width: 35px;
  33. height: 35px;
  34. line-height: 35px;
  35. text-align: center;
  36. background: blue;
  37. }
  38.  
  39. .lineDiv .minDiv .vals:after {
  40. content: "";
  41. width: 0px;
  42. height: 0px;
  43. border-top: 6px solid blue;
  44. border-left: 6px solid transparent;
  45. border-right: 6px solid transparent;
  46. border-bottom: 6px solid transparent;
  47. display: block;
  48. margin-left: 11px;
  49. }
  50. </style>
  51. </head>
  52.  
  53. <body>
  54. <center>
  55. <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
  56. </center>
  57. <div id="lineDiv">
  58. <div id="minDiv">
  59. <div id="vals">0</div>
  60. </div>
  61. </div>
  62. <script>
  63. window.onload = function() {
  64.  
  65. var lineDiv = document.getElementById('lineDiv'); //长线条
  66. var minDiv = document.getElementById('minDiv'); //小方块
  67. var msg = document.getElementById("msg");
  68. var vals = document.getElementById("vals");
  69. var ifBool = false; //判断鼠标是否按下
  70.  
  71. //鼠标按下方块
  72. minDiv.addEventListener("touchstart", function(e) {
  73. e.stopPropagation();
  74. ifBool = true;
  75. console.log("鼠标按下")
  76. });
  77.  
  78. //拖动
  79. window.addEventListener("touchmove", function(e) {
  80. console.log("鼠标拖动")
  81. if(ifBool) {
  82. var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x
  83. var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
  84. var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 
  85. if(minDiv_left >= lineDiv.offsetWidth - 15) {
  86. minDiv_left = lineDiv.offsetWidth - 15;
  87. }
  88. if(minDiv_left < 0) {
  89. minDiv_left = 0;
  90. }
  91. //设置拖动后小方块的left值
  92. minDiv.style.left = minDiv_left + "px";
  93. msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  94. vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  95. }
  96. });
  97. //鼠标松开
  98. window.addEventListener("touchend", function(e) {
  99. console.log("鼠标弹起")
  100. ifBool = false;
  101. });
  102. //获取元素的绝对位置
  103. function getPosition(node) {
  104. var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
  105. var top = node.offsetTop;
  106. current = node.offsetParent; // 取得元素的offsetParent
  107. 　 // 一直循环直到根元素
  108. 　　
  109. while(current != null) {　　
  110. left += current.offsetLeft;　　
  111. top += current.offsetTop;　　
  112. current = current.offsetParent;　　
  113. }
  114. return {
  115. "left": left,
  116. "top": top
  117. };
  118. }
  119. }
  120. </script>
  121. </body>
  122.  
  123. </html>

兼容PC端和移动端

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <title>鼠标拖动小方块</title>
  8. <style type="text/css">
  9. .lineDiv {
  10. position: relative;
  11. height: 5px;
  12. background: red;
  13. width: 300px;
  14. margin: 50px auto;
  15. }
  16.  
  17. .lineDiv .minDiv {
  18. position: absolute;
  19. top: -5px;
  20. left: 0;
  21. width: 15px;
  22. height: 15px;
  23. background: green;
  24. cursor: pointer
  25. }
  26.  
  27. .lineDiv .minDiv .vals {
  28. position: absolute;
  29. font-size: 20px;
  30. top: -45px;
  31. left: -10px;
  32. width: 35px;
  33. height: 35px;
  34. line-height: 35px;
  35. text-align: center;
  36. background: blue;
  37. }
  38.  
  39. .lineDiv .minDiv .vals:after {
  40. content: "";
  41. width: 0px;
  42. height: 0px;
  43. border-top: 6px solid blue;
  44. border-left: 6px solid transparent;
  45. border-right: 6px solid transparent;
  46. border-bottom: 6px solid transparent;
  47. display: block;
  48. margin-left: 11px;
  49. }
  50. </style>
  51. </head>
  52.  
  53. <body>
  54. <center>
  55. <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
  56. </center>
  57. <div id="lineDiv">
  58. <div id="minDiv">
  59. <div id="vals">0</div>
  60. </div>
  61. </div>
  62. <script>
  63. window.onload = function() {
  64.  
  65. var lineDiv = document.getElementById('lineDiv'); //长线条
  66. var minDiv = document.getElementById('minDiv'); //小方块
  67. var msg = document.getElementById("msg");
  68. var vals = document.getElementById("vals");
  69. var ifBool = false; //判断鼠标是否按下
  70. //事件
  71. var start = function(e) {
  72. e.stopPropagation();
  73. ifBool = true;
  74. console.log("鼠标按下")
  75. }
  76. var move = function(e) {
  77. console.log("鼠标拖动")
  78. if(ifBool) {
  79. if(!e.touches) { //兼容移动端
  80. var x = e.clientX;
  81. } else {  //兼容PC端
  82. var x = e.touches[0].pageX;
  83. }
  84. //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
  85. var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
  86. var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 
  87. if(minDiv_left >= lineDiv.offsetWidth - 15) {
  88. minDiv_left = lineDiv.offsetWidth - 15;
  89. }
  90. if(minDiv_left < 0) {
  91. minDiv_left = 0;
  92. }
  93. //设置拖动后小方块的left值
  94. minDiv.style.left = minDiv_left + "px";
  95. msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  96. vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
  97. }
  98. }
  99. var end = function(e) {
  100. console.log("鼠标弹起")
  101. ifBool = false;
  102. }
  103. //鼠标按下方块
  104. minDiv.addEventListener("touchstart", start);
  105. minDiv.addEventListener("mousedown", start);
  106. //拖动
  107. window.addEventListener("touchmove", move);
  108. window.addEventListener("mousemove", move);
  109. //鼠标松开
  110. window.addEventListener("touchend", end);
  111. window.addEventListener("mouseup", end);
  112. //获取元素的绝对位置
  113. function getPosition(node) {
  114. var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
  115. var top = node.offsetTop;
  116. current = node.offsetParent; // 取得元素的offsetParent
  117. 　 // 一直循环直到根元素
  118. 　　
  119. while(current != null) {　　
  120. left += current.offsetLeft;　　
  121. top += current.offsetTop;　　
  122. current = current.offsetParent;　　
  123. }
  124. return {
  125. "left": left,
  126. "top": top
  127. };
  128. }
  129. }
  130. </script>
  131. </body>
  132.  
  133. </html>

设置滑块的滑动范围

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>鼠标拖动小方块</title>
  7. <style type="text/css">
  8. .lineDiv {
  9. position: relative;
  10. height: 5px;
  11. background: red;
  12. width: 95%;
  13. margin: 50px auto;
  14. }
  15.  
  16. .lineDiv .minDiv {
  17. position: absolute;
  18. top: -15px;
  19. left: 0;
  20. width: 35px;
  21. height: 35px;
  22. background: green;
  23. cursor: pointer;
  24. transition: all 0s;
  25. }
  26.  
  27. .lineDiv .vals {
  28. z-index: 100;
  29. position: absolute;
  30. top: 0px;
  31. left: 0px;
  32. width: 0px;
  33. height: 5px;
  34. background: blue;
  35. }
  36. </style>
  37. </head>
  38.  
  39. <body>
  40. <center>
  41. <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
  42. </center>
  43. <div id="lineDiv">
  44. <div id="vals"></div>
  45. <!-- -->
  46. <div id="minDiv"></div>
  47. <!-- -->
  48. </div>
  49. <script>
  50. window.onload = function() {
  51.  
  52. var lineDiv = document.getElementById('lineDiv'); //长线条
  53. var minDiv = document.getElementById('minDiv'); //小方块
  54. var minVals = document.getElementById('vals'); //左长线
  55. var msg = document.getElementById("msg"); //最上面的信息
  56. var ifBool = false; //判断滑块是否按下
  57.  
  58. var lineDiv_W = getPosition(lineDiv).width; //长线的长度
  59. var lineDiv_L = getPosition(lineDiv).left; //长线距离html的left
  60.  
  61. var minDiv_W = getPosition(minDiv).width; //滑块的长度
  62. var minDiv_L = getPosition(minDiv).left; //滑块距离html的left
  63.  
  64. var Slider_W_MAX = lineDiv_W - minDiv_W; //滑块可以滑动的最大值px，范围是0~Slider_W_MAX
  65.  
  66. var minNum = 0; //最小值
  67. var maxNum = 500; //最大值
  68.  
  69. var startNum = 100; //起始值
  70. var endNum = 400; //结束值
  71.  
  72. var min_Px = Slider_W_MAX / maxNum * startNum; //滑块可以滑动的最小px
  73. var max_Px = Slider_W_MAX / maxNum * endNum; //滑块可以滑动的最大px
  74.  
  75. var minDiv_left=0; //当前滑块的位置
  76. /*
  77.  Slider_W_MAX  1元对应的px？     1
  78.   maxNum    1   1px对应的金额？
  79. */
  80.  
  81. function initSlider(initPX) { //设置滑块的初始位置
  82. console.log(initPX);
  83. minDiv_left=initPX; //设置滑块的位置
  84. minDiv.style.left = initPX + "px";
  85. minVals.style.width = initPX + "px";
  86. msg.innerText = parseInt(initPX / Slider_W_MAX * 100);
  87. }
  88.  
  89. (function() { //初始化滑块位置
  90. if(startNum >= 0) { //求出startNum对应的px
  91. initSlider(Slider_W_MAX / maxNum * startNum)
  92. }
  93. })()
  94.  
  95. //事件
  96. var start = function(e) {
  97. ifBool = true;
  98. //console.log("鼠标按下")
  99. }
  100. var move = function(e) {
  101. //console.log("鼠标拖动")
  102. if(ifBool) {
  103. var x; //记录滑块距离html的距离left
  104. if(!e.touches) { //兼容PC端
  105. x = e.clientX;
  106. } else { //兼容移动端
  107. x = e.touches[0].pageX;
  108. }
  109.  
  110. minDiv_left = x - lineDiv_L; //小方块相对于父元素（长线条）的left值 
  111. if(minDiv_left >= Slider_W_MAX) {
  112. minDiv_left = Slider_W_MAX;
  113. }
  114. if(minDiv_left < 0) {
  115. minDiv_left = 0;
  116. }
  117.  
  118. //设置拖动后小方块的left值
  119. initSlider(minDiv_left)
  120.  
  121. }
  122. }
  123. var end = function(e) {
  124. if(minDiv_left>max_Px){
  125. initSlider(max_Px);
  126. }
  127. if(minDiv_left<min_Px){
  128. initSlider(min_Px);
  129. }
  130. ifBool = false;
  131. }
  132. //鼠标按下方块
  133. minDiv.addEventListener("touchstart", start);
  134. minDiv.addEventListener("mousedown", start);
  135. //拖动
  136. window.addEventListener("touchmove", move);
  137. window.addEventListener("mousemove", move);
  138. //鼠标松开
  139. window.addEventListener("touchend", end);
  140. window.addEventListener("mouseup", end);
  141.  
  142. //获取元素的绝对位置
  143. function getPosition(node) {
  144. var width = node.offsetWidth; //元素宽度
  145. var height = node.offsetHeight; //元素高度
  146. var left = node.offsetLeft; //获取元素相对于其根元素的left值var left
  147. var top = node.offsetTop; //获取元素相对于其根元素的top值var top
  148. current = node.offsetParent; // 取得元素的offsetParent
  149.  
  150. // 一直循环直到根元素　　
  151. while(current != null) {　　
  152. left += current.offsetLeft;　　
  153. top += current.offsetTop;　　
  154. current = current.offsetParent;　　
  155. }
  156. return {
  157. "width": width,
  158. "height": height,
  159. "left": left,
  160. "top": top
  161. };
  162. }
  163. }
  164. </script>
  165. </body>
  166.  
  167. </html>

点击水波纹效果：

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <title>JS</title>
  6.   <link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" />
  7.   <script type="text/javascript" src=""></script>
  8.   <style type="text/css" media="screen">
  9.    ul {
  10.     font-size: 0;
  11.     position: relative;
  12.     padding: 0;
  13.     width: 480px;
  14.     margin: 40px auto;
  15.     user-select: none;
  16.    }
  17.     
  18.    li {
  19.     display: inline-block;
  20.     width: 160px;
  21.     height: 60px;
  22.     background: #E95546;
  23.     font-size: 16px;
  24.     text-align: center;
  25.     line-height: 60px;
  26.     color: white;
  27.     text-transform: uppercase;
  28.     position: relative;
  29.     overflow: hidden;
  30.     cursor: pointer;
  31.    }
  32.     
  33.    .slider {
  34.     display: block;
  35.     position: absolute;
  36.     bottom: 0;
  37.     left: 0;
  38.     height: 4px;
  39.     background: #1685D3;
  40.     transition: all 0.5s;
  41.    }
  42.     
  43.    .ripple {
  44.     width: 0;
  45.     height: 0;
  46.     border-radius: 50%;
  47.     background: rgba(255, 255, 255, 0.4);
  48.     -webkit-transform: scale(0);
  49.     -ms-transform: scale(0);
  50.     transform: scale(0);
  51.     position: absolute;
  52.     opacity: 1;
  53.    }
  54.     
  55.    .rippleEffect {
  56.     -webkit-animation: rippleDrop .4s linear;
  57.     animation: rippleDrop .4s linear;
  58.    }
  59.     
  60.    @-webkit-keyframes rippleDrop {
  61.     100% {
  62.      -webkit-transform: scale(2);
  63.      transform: scale(2);
  64.      opacity: 0;
  65.     }
  66.    }
  67.     
  68.    @keyframes rippleDrop {
  69.     100% {
  70.      -webkit-transform: scale(2);
  71.      transform: scale(2);
  72.      opacity: 0;
  73.     }
  74.    }
  75.   </style>
  76.  
  77.  </head>
  78.  <body>
  79.   <ul>
  80.    <li>项目一</li>
  81.    <li>项目二</li>
  82.    <li>项目三</li>
  83.    <li class="slider"></li>
  84.   </ul>
  85.  </body>
  86.  <script>
  87.   $("ul li").click(function(e) {
  88.  
  89.    if($(this).hasClass('slider')) {
  90.     return;
  91.    }
  92.  
  93.    var whatTab = $(this).index();
  94.  
  95.    var howFar = 160 * whatTab;
  96.  
  97.    $(".slider").css({
  98.     left: howFar + "px"
  99.    });
  100.  
  101.    $(".ripple").remove();
  102.  
  103.    var posX = $(this).offset().left,
  104.     posY = $(this).offset().top,
  105.     buttonWidth = $(this).width(),
  106.     buttonHeight = $(this).height();
  107.    console.log(posX, posY, buttonWidth, buttonHeight)
  108.  
  109.    $(this).append("<span class='ripple'></span>");
  110.  
  111.    if(buttonWidth >= buttonHeight) {
  112.     buttonHeight = buttonWidth;
  113.    } else {
  114.     buttonWidth = buttonHeight;
  115.    }
  116.  
  117.    var x = e.pageX - posX - buttonWidth / 2;
  118.    var y = e.pageY - posY - buttonHeight / 2;
  119.  
  120.    $(".ripple").css({
  121.     width: buttonWidth,
  122.     height: buttonHeight,
  123.     top: y + 'px',
  124.     left: x + 'px'
  125.    }).addClass("rippleEffect");
  126.  
  127.   });
  128.  </script>
  129.  
  130. </html>


 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号