JS实现拖动模糊框特效
作者：hthththtt
这篇文章主要为大家详细介绍了JS实现拖动模糊框特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现拖动模糊框特效的具体代码，供大家参考，具体内容如下
需求：
在图片上拖动按钮，图片蒙层慢慢覆盖，当蒙层边缘碰到左右下角文字时，文字隐藏。
技术：
监听器，鼠标坐标获取
效果图
源码分享：
HTML
<h1>Image Comparison Slider</h1>
<nav>
<!--底层图--> <img src="img/img-original.jpg" alt="">
<!--蒙版使用背景图--> <div id="img">
<h3 id="leftBottom">Modified</h3>
<!--拖动按钮--> <button id="btn">
<span class="iconfont icon-zuojiantou"></span>
<span class="iconfont icon-youjiantou"></span>
</button>
</div>
<h3 id="rightBottom">Original</h3>
</nav>
CSS样式
<style>
* {
margin: 0;
padding: 0;
color: #E8F6F5;
}
body {
background-color: #566B89;
padding-top: 1px;
}
nav {
width: 1200px;
height: 675px;
overflow-x: hidden;
position: relative;
margin: 100px auto 0;
}
h1 {
text-align: center;
margin-top: 100px;
font-weight: 400;
}
nav>img {
position: absolute;
}
#img {
width: 600px; /*初始状态显示一半蒙层*/
height: 675px;
background: url("img/img-modified.jpg"); /*这里容器大小与图片一致，若想改变大小，设置背景大小属性 background-size: 图片宽 图片高;*/
position: relative;
animation: start 1s ease-in-out;
}
#img img {
width: 100%;
height: 100%;
}
@keyframes start {
0% {
width: 0;
}
50% {
width: 650px;
}
100% {
width: 600px;
}
}
#btn {
position: absolute;
right: -25px;
top: calc(50% - 25px);
width: 56px;
height: 56px;
line-height: 56px;
border: none;
outline: none;
border-radius: 50%;
background-color: pink;
font-size: 0;
text-align: center;
color: white;
cursor: pointer;
}
.iconfont {
font-size: 20px;
}
h3 {
font-weight: 400;
color: white;
}
#leftBottom,#rightBottom {
position: absolute;
width: 100px;
bottom: 50px;
}
#leftBottom {
left: 50px;
}
#rightBottom {
right: 50px;
}
</style>
JS部分
<script>
let img = document.querySelector("#img");
let btn = document.querySelector("#btn");
let nav = document.querySelector("nav");
let leftBottom = document.querySelector("#leftBottom");
let rightBottom = document.querySelector("#rightBottom");
btn.onmousedown = function (e) {
let clientx = e.clientX; // 点击获取鼠标初始X坐标
nav.onmousemove = function () {
let e = arguments[0] || window.event;
let X = e.clientX; // 移动时获取鼠标移动时的X坐标
let imgW = parseInt(getComputedStyle(img,null).width);
img.style.width = `${ imgW + X - clientx}px`; // 图片宽度 = 移动时的X坐标 - 点击时的初始坐标 也就是 图片宽度 + 鼠标X坐标的偏移量
clientx = X ; // 将最新的位置的X坐标 赋值给 点击初始坐标 也就是 更新 X坐标初始值
if (imgW < 150){
leftBottom.style.display = "none";
}else {
leftBottom.style.display = "block";
}
if (imgW > 1050){
rightBottom.style.display = "none";
}else {
rightBottom.style.display = "block";
}
}
};
document.onmouseup = function () {
nav.onmousemove = null;
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。