JS实现拖动模糊框特效

时间:2022-06-27 06:54:46

本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下

需求:

在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下角文字时,文字隐藏。

技术:

监听器,鼠标坐标获取

效果图

JS实现拖动模糊框特效

源码分享:

HTML

  1. <h1>Image Comparison Slider</h1>
  2. <nav>
  3. <!--底层图--> <img src="img/img-original.jpg" alt="">
  4. <!--蒙版使用背景图--> <div id="img">
  5. <h3 id="leftBottom">Modified</h3>
  6. <!--拖动按钮--> <button id="btn">
  7. <span class="iconfont icon-zuojiantou"></span>
  8. <span class="iconfont icon-youjiantou"></span>
  9. </button>
  10. </div>
  11. <h3 id="rightBottom">Original</h3>
  12. </nav>

CSS样式

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. color: #E8F6F5;
  6. }
  7. body {
  8. background-color: #566B89;
  9. padding-top: 1px;
  10. }
  11. nav {
  12. width: 1200px;
  13. height: 675px;
  14. overflow-x: hidden;
  15. position: relative;
  16. margin: 100px auto 0;
  17. }
  18. h1 {
  19. text-align: center;
  20. margin-top: 100px;
  21. font-weight: 400;
  22. }
  23. nav>img {
  24. position: absolute;
  25. }
  26. #img {
  27. width: 600px; /*初始状态显示一半蒙层*/
  28. height: 675px;
  29. background: url("img/img-modified.jpg"); /*这里容器大小与图片一致,若想改变大小,设置背景大小属性 background-size: 图片宽 图片高;*/
  30. position: relative;
  31. animation: start 1s ease-in-out;
  32. }
  33. #img img {
  34. width: 100%;
  35. height: 100%;
  36. }
  37. @keyframes start {
  38. 0% {
  39. width: 0;
  40. }
  41. 50% {
  42. width: 650px;
  43. }
  44. 100% {
  45. width: 600px;
  46. }
  47. }
  48. #btn {
  49. position: absolute;
  50. right: -25px;
  51. top: calc(50% - 25px);
  52. width: 56px;
  53. height: 56px;
  54. line-height: 56px;
  55. border: none;
  56. outline: none;
  57. border-radius: 50%;
  58. background-color: pink;
  59. font-size: 0;
  60. text-align: center;
  61. color: white;
  62. cursor: pointer;
  63. }
  64. .iconfont {
  65. font-size: 20px;
  66. }
  67.  
  68. h3 {
  69. font-weight: 400;
  70. color: white;
  71. }
  72. #leftBottom,#rightBottom {
  73. position: absolute;
  74. width: 100px;
  75. bottom: 50px;
  76. }
  77. #leftBottom {
  78. left: 50px;
  79. }
  80. #rightBottom {
  81. right: 50px;
  82. }
  83. </style>

JS部分

  1. <script>
  2. let img = document.querySelector("#img");
  3. let btn = document.querySelector("#btn");
  4. let nav = document.querySelector("nav");
  5. let leftBottom = document.querySelector("#leftBottom");
  6. let rightBottom = document.querySelector("#rightBottom");
  7. btn.onmousedown = function (e) {
  8. let clientx = e.clientX; // 点击获取鼠标初始X坐标
  9. nav.onmousemove = function () {
  10. let e = arguments[0] || window.event;
  11. let X = e.clientX; // 移动时获取鼠标移动时的X坐标
  12. let imgW = parseInt(getComputedStyle(img,null).width);
  13. img.style.width = `${ imgW + X - clientx}px`; // 图片宽度 = 移动时的X坐标 - 点击时的初始坐标 也就是 图片宽度 + 鼠标X坐标的偏移量
  14. clientx = X ; // 将最新的位置的X坐标 赋值给 点击初始坐标 也就是 更新 X坐标初始值
  15. if (imgW < 150){
  16. leftBottom.style.display = "none";
  17. }else {
  18. leftBottom.style.display = "block";
  19. }
  20. if (imgW > 1050){
  21. rightBottom.style.display = "none";
  22. }else {
  23. rightBottom.style.display = "block";
  24. }
  25. }
  26. };
  27. document.onmouseup = function () {
  28. nav.onmousemove = null;
  29. }
  30. </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

原文链接:https://blog.csdn.net/hthththtt/article/details/108181361