javascript - 拖动元素后更改值css属性

我有两个视频：视频1在视频2下方。当我移动可拖动元素时，我想显示视频1的一部分。

我找到了一个带有图片的示例，并通过视频对其进行了测试，但是效果不佳。

图片的小提琴：https://jsfiddle.net/kr64c5Lf/11/

带有视频的小提琴：https://jsfiddle.net/1co0x58v/9/

JAVASCRIPT

    $("#draggable").draggable();

    jQuery("#droppable").droppable({
      drop: function (event, ui) {

        debugger;

        var pos = ui.draggable.offset();
        var dPos = $(this).offset();

        // Pixxel value of positions
        var elementTopPosition = pos.top - dPos.top;
        var elementLeftPosition = pos.left - dPos.left;

        console.log(elementTopPosition);
        console.log(elementLeftPosition);

        $("#video1").css("max-width", elementLeftPosition);
        $("#video1").css("max-height", elementTopPosition);
        $("#video1").css("overflow", "hidden");
        $("#video1").css("z-index", "100");

        // Getting parent element height and width
        var parentWidth = jQuery("#droppable").width();
        var ParentHeight = jQuery("#droppable").height();

        // Coverting to percentage
        var topInPercentage = (100 * elementTopPosition) / ParentHeight;
        var leftInPercentage = (100 * elementLeftPosition) / parentWidth;

        $("#draggable").css({top: topInPercentage + '%', left: leftInPercentage + '%'});

      }
    });

的HTML

    <div class="mediaplayer">
      <video id="video1">
          <source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4" type="video/mp4" />
      </video>
      <div id="droppable">
        <div id="draggable">Barre</div>
      </div>
      <video id="video2">
         <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
      </video>
    </div>

的CSS

    .mediaplayer video, .mediaplayer .polyfill-video {
       position: absolute;
       top: 0;
       left: 0;
       height: 180px;
       width: 320px;
    }
    #draggable {
       width: 320px;
       padding: 2px 5px;
       cursor: pointer;
       color: #000;
       z-index: 100;
    }
    #droppable {
       position: relative;
       width: 320px;
       height: 180px;
       padding: 10px;
       z-index: 100;
    }

最佳答案

我觉得使用Draggable和Droppable对您不利。这是Slider的解决方案：

例

https://jsfiddle.net/Twisty/1co0x58v/13/

的HTML

<div class="player">
  <div id="barre"></div>
  <div class="mediaplayer">
    <video id="video1">
      <source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4" type="video/mp4" />
    </video>
    <video id="video2">
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    </video>
  </div>
  <table>
    <tr>
      <th>Time</th>
      <td>
        <input class="time-slider" type="range" disabled value="0" step="any" />
      </td>
    </tr>
    <tr>
      <td>
        <input value="Play" type="button" class="play" />
      </td>
    </tr>
    <tr>
      <td>
        <input value="Stop" type="button" class="pause" />
      </td>
    </tr>
    <tr>
      <th>Mute</th>
      <td>
        <input class="muted" type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>Volume</th>
      <td>
        <input class="volume-slider" type="range" value="1" max="1" step="0.01" />
      </td>
    </tr>
  </table>
</div>

的CSS

.player {
  margin: auto;
  padding: 10px;
  width: 320px;
  max-width: 900px;
  min-width: 320px;
}

.mediaplayer {
  position: relative;
  height: 0;
  width: 320px;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.mediaplayer video,
.mediaplayer .polyfill-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 320px;
}

.mediaplayer video#video1 {
  top: -180px;
  z-index: 100;
}

#barre {
  height: 160px;
  float: left;
  margin-top: 10px;
  margin-left: -20px;
}

jQuery的

$("#barre").slider({
  orientation: "vertical",
  range: "min",
  min: 0,
  max: 180,
  value: 180,
  slide: function(event, ui) {
    var offset = 180;
    if (ui.value == 0) {
      $("#video1").css("top", "0px");
    } else {
      $("#video1").css("top", "-" + ui.value + "px");
    }
  }
});

这利用了绝对定位和top值。由于mediaplayer的高度是180px，因此我将其移入溢出（已隐藏）以隐藏video1。当滑块从“顶部”向下移动时，其值从180开始并下降。这使我可以轻松地上下滑动video1。

更新资料

同样，我仍然认为Slider是一种更好的方法。看到您的更新后，我创建了这个：

http://jsfiddle.net/Twisty/1co0x58v/25/

的HTML

<div class="mediaplayer">
    <div id="barre"></div>
    <div class="viewport">
      <video id="video1" autoplay>
        <source src="https://3dprintmaker.com/perso/video2.mp4" type="video/mp4" />
      </video>
    </div>
    <video id="video2" autoplay>
      <source src="https://3dprintmaker.com/perso/video1.mp4" type="video/mp4" />
    </video>
  </div>

的CSS

.viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.mediaplayer video,
.mediaplayer .viewport video,
.mediaplayer .polyfill-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 320px;
}

#barre {
  height: 0px;
  width: 320px;
  margin-left: 15px;
}

#barre .ui-slider-handle {
  background-image: url("https://3dprintmaker.com/perso/player/barre.jpg");
  background-color: #6d6d6d;
  background-repeat: no-repeat;
  background-position: center center;
  width: 15px;
  height: 185px;
}

jQuery的

$("#barre").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    max: 320,
    value: 160,
    slide: function(e, ui){
    $(".viewport").css("width", (ui.value + 7) + "px");
    }
  });

为了实现您的期望，我创建了一个类viewport的包装div，该包装成为video1的可视区域。允许溢出并隐藏。因此，现在我们要做的就是调整视口的宽度，并且video1将显示为覆盖video2。

为了制作句柄，我们只使用一些CSS。根据需要设置手柄的宽度和高度，并为其提供所需的图像背景。