私はいくつかの問題を抱えている比較スライダーに取り組んでいます。 mousemoveで移動するのではなく、ハンドルをドラッグ可能にしたいと思います。ドラッグ可能なハンドル用に更新しようとしましたが、正しく機能するように思えません。これにはjQuery UIを使用したくありません。どんな助けも大歓迎です。スクリプトは次のとおりです。
document.addEventListener('DOMContentLoaded', function() {
var parent = document.querySelector('.splitview'),
topPanel = parent.querySelector('.top'),
handle = parent.querySelector('.handle'),
skewHack = 0,
delta = 0;
// If the parent has .skewed class, set the skewHack var.
if (parent.className.indexOf('skewed') != -1) {
skewHack = 1000;
}
parent.addEventListener('mousemove', function(event) {
// Get the delta between the mouse position and center point.
delta = (event.clientX - window.innerWidth / 2) * 0.5;
// Move the handle.
handle.style.left = event.clientX + delta + 'px';
// Adjust the top panel width.
topPanel.style.width = event.clientX + skewHack + delta + 'px';
});
});
/* Panels. */
.splitview {
position: relative;
width: 100%;
min-height: 45vw;
overflow: hidden;
}
.panel {
position: absolute;
width: 100vw;
min-height: 45vw;
overflow: hidden;
}
.panel .content {
position: absolute;
width: 100vw;
min-height: 45vw;
color: #FFF;
}
.panel.top .description {
transform: translateY(-50%);
}
.panel.bottom .description {
transform: translateY(-50%);
}
.panel .description {
width: 25%;
position: absolute;
top: 50%;
text-align: center;
z-index: 999;
}
.panel .description h1 {
margin-bottom: 0;
font-size: 60px;
line-height: .9;
}
.panel .description ul {
text-align: left;
margin-left: 4.5em;
}
.panel .description ul li {
list-style: disc;
font-size: 20px;
}
.panel .description h1, .panel .description p, .panel .description ul {
color: #fff;
}
.panel img {
box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
filter: brightness(0.3);
transition: 0.2s ease;
}
.panel img:hover {
filter: brightness(0.6);
}
.panel .description img {
position: relative;
top: 0;
width: 60%;
transform: none;
left: 0;
box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.15);
margin-bottom: 1em;
display: inline-block;
filter: brightness(1);
}
.bottom {
background-color: gray;
z-index: 1;
}
.bottom .description {
right: 10%;
}
.top {
background-color: green;
z-index: 2;
width: 50vw;
}
.top .description {
left: 10%;
}
/* Handle. */
.handle {
height: 100%;
position: absolute;
display: block;
background-color: #fff;
width: 5px;
top: 0;
left: 50%;
z-index: 3;
}
/* Skewed. */
.skewed .handle {
top: 50%;
transform: translateY(-50%);
height: 200%;
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
}
.skewed .top {
margin-left: -1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content {
margin-left: 1000px;
}
<div class="splitview skewed">
<div class="panel bottom">
<div class="content">
<img src="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Original">
</div>
</div>
<div class="panel top">
<div class="content">
<img src="https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Duotone">
</div>
</div>
<div class="handle"></div>
<input type="range" min=0 max=100 value=50/>
<inpit
</div>
回答 2 件
これはあなたを助けることができます。これはdeviderのコードです。 https://github.com/CodyHouse/image-comparison-slider/blob/master/js/main.js
私はこの非常に不十分なヘルプを提供します-あなたはそれに多くの作業をする必要があります。しかし、マウスダウン状態をチェックし、おそらく要素の状態(ここには表示されていません)にマウスオーバーして、それをチェックして、両方が真でない場合は、
return
あなたのmousemove機能から?これはかなりお粗末なバージョンです。主な問題は、マウスアップとクリックを区別することですが、最初にカーソルを合わせると動きがなくなり、マウスダウンをクリックすると表示されます。
とにかく、それは大したことではなく、おそらく始まりです。幸運を。
コードペン:https://codepen.io/dmgig/pen/mLZPXG