我最近在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/

10-10 08:09