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