如何解决图像比较滑块在 Firefox 上不起作用
我发现 this tutorial 可以创建一个图像比较滑块,它在 Chrome 上运行良好。但是,当我在 Firefox 上加载它时,滑块根本没有反应。
这里有一个例子:
const slider = document.querySelector(".slider input");
const img = document.querySelector(".images .img-2");
const dragLine = document.querySelector(".slider .drag-line");
slider.oninput = ()=>{
let sliderVal = slider.value;
dragLine.style.left = sliderVal + "%";
img.style.width = sliderVal + "%";
}
*{
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
html,body{
/* display: grid; */
height: 100%;
place-items: center;
background: #efefef;
}
.wrapper{
position: relative;
height: 600px;
width: 743px;
overflow: hidden;
background: #fff;
border: 7px solid #fff;
Box-shadow: 0px 0px 15px rgba(0,0.15);
margin: auto;
}
.wrapper .images{
height: 100%;
width: 100%;
display: flex;
}
.wrapper .images .img-1{
height: 100%;
width: 100%;
background: url("https://res.cloudinary.com/joanmm/image/upload/v1620035713/CLD/Trommel_digital.png") no-repeat;
/* background: url("images/car.jpg") no-repeat; */
}
.wrapper .images .img-2{
position: absolute;
height: 100%;
width: 50%;
/* filter: blur(5px); */
background: url("https://res.cloudinary.com/joanmm/image/upload/v1620035603/CLD/Trommel_original.jpg") no-repeat;
/* background: url("images/car.png") no-repeat; */
}
.wrapper .slider{
position: absolute;
top: 0;
width: 100%;
z-index: 99;
}
.wrapper .slider input{
width: 100%;
outline: none;
background: none;
-webkit-appearance: none;
}
.slider input::-webkit-slider-thumb{
height: 586px;
width: 3px;
background: none;
-webkit-appearance: none;
cursor: col-resize;
}
.slider .drag-line{
width: 3px;
height: 586px;
position: absolute;
left: 49.85%;
pointer-events: none;
}
.slider .drag-line::before,.slider .drag-line::after{
position: absolute;
content: "";
width: 100%;
height: 273px;
background: #fff;
}
.slider .drag-line::before{
top: 0;
}
.slider .drag-line::after{
bottom: 0;
}
.slider .drag-line span{
height: 42px;
width: 42px;
border: 3px solid #fff;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%,-50%);
}
.slider .drag-line span::before,.slider .drag-line span::after{
position: absolute;
content: "";
top: 50%;
border: 10px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
transform: translate(-50%,-50%) rotate(45deg);
}
.slider .drag-line span::before{
left: 40%;
border-left-color: #fff;
}
.slider .drag-line span::after{
left: 60%;
border-top-color: #fff;
}
<div class="wrapper">
<div class="images">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
<div class="slider">
<div class="drag-line">
<span></span>
</div>
<input type="range" min="0" max="100" value="50">
</div>
</div>
我没有设法使用检查器工具识别任何相关的错误检查。
对可能的问题有什么想法吗?
解决方法
这是因为 Firefox 不支持 <input type="range">
。您可能更喜欢使用基于 Drag and drop API
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。