html - 之前 之后 Image Slider 设置 Divi, WordPress
问题描述
我有我之前的 img 滑块。我试图粘贴代码,但是尽管滑块可以工作,但我的页面会发疯。
原来的
我的滑块
https://www.w3schools.com/code/tryit.asp?filename=GIJD6V38V0QR
<!DOCTYPE html>
<style>
body {
margin: 0;
}
.container {
height: 73.5vw;
margin: 1vw auto;
max-height: 750px;
max-width: 1000px;
overflow: hidden;
width: 98vw;
}
.container figure {
background-image: url(https://webdevtrick.com/wp-content/uploads/1st.jpg);
background-size: cover;
font-size: 0;
height: 100%;
margin: 0;
position: relative;
width: 100%;
}
#compare {
background-image: url(https://webdevtrick.com/wp-content/uploads/2nd.jpg);
background-size: cover;
bottom: 0;
border-right: 5px solid rgba(255, 255, 255, 0.7);
box-shadow: 10px 0 15px -13px #000;
height: 100%;
max-width: 98.6%;
min-width: 0.6%;
overflow: visible;
position: absolute;
width: 50%;
animation: first 2s 1 normal ease-in-out 0.1s;
-webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#slider {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
cursor: col-resize;
height: 100vw;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: relative;
top: -100vw;
width: 100%;
}
input#slider::-moz-range-track {
background: transparent;
}
input#slider::-ms-track {
border: none;
background-color: transparent;
height: 100vw;
left: 0;
outline: none;
position: relative;
top: -100vw;
width: 100%;
margin: 0;
padding: 0;
cursor: col-resize;
color: transparent;
}
input#slider::-ms-fill-lower {
background-color: transparent;
}
input#slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-moz-range-thumb {
-moz-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-ms-thumb {
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-ms-tooltip {
display: none;
}
#compare::before {
background: url(https://webdevtrick.com/wp-content/uploads/comparision.png) no-repeat scroll 0 center transparent;
background-size: contain;
content: " ";
float: right;
height: 100%;
margin-right: -34px;
position: relative;
top: 0;
width: 64px;
}
@keyframes first {
0% {
width: 0%;
}
50% {
width: 80%;
}
100% {
width: 50%;
}
}
@-webkit-keyframes first {
0% {
width: 0%;
}
50% {
width: 80%;
}
100% {
width: 50%;
}
}
</style>
<script>
function beforeAfter() {
document.getElementById('compare').style.width = document.getElementById('slider').value + "%";
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<figure>
<div id="compare"></div>
</figure>
<input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="slider" />
</div>
<script src="function.js"></script>
</body>
</html>
我找不到问题所在style
。任何帮助将不胜感激。
解决方案
推荐阅读
- macos - Xamarin Workbook 和 Visual Studio 给出不同的结果
- java - 即使主类存在,也无法在 java 中找到或加载主类?
- sql - 合并两个表并创建新列
- sequelize.js - 使用列值续集关联范围
- python - 未找到:/style.css/,django
- linux - 我正在尝试从文件中读取内容,但没有得到准确的输出
- c# - UWP 在设置中存储和加载视频编码属性
- flutter - Flutter - 未处理的异常:在 dispose() 之后调用 setState()
- c# - 有没有办法运行使用操作系统身份验证来运行 RMAN 备份作为 systemd 的 .NET Core 服务?
- c - 整数的用户输入无限循环,直到用户输入字符 (C)