我最近在codepen.io上遇到了this before/after slider。
但是我有一个问题:如何更改滑块开始的位置。滑块从中间开始,我看不到此代码中的设置位置:
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex = 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener( "mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);
最佳答案
在css的底部
#video-clipper video {
width: 450%;
postion: absolute;
height: 100%;
}
https://codepen.io/anon/pen/jwMwXB
关于javascript - 滑块HTML5之前/之后的起始位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44543643/