logo标签列表

让图像飞出屏幕

javascripthtmlcss
5

如何设置使播放图像不与窗帘和红色边框相连？

这样，播放图像就可以飞出屏幕，超过它的边界。

https://jsfiddle.net/v8j26qxw/

它不应该留在红色边框内。

工作原理是，当您点击播放图像时，它会分成两半。

我该如何设置，使得播放图像分离时，它会离开屏幕？

这就是我想做的。

播放图像停留在红色边框内，我希望它可以走出并离开屏幕。

问题是，播放图像停留在红色边框内，我不想要它。

我不希望播放图像被隐藏。

不要这样： Not this

它应该做以下操作。

我希望播放图像完全可见，超出红色边框。

最好不要使用z-index的方法。

我想要的效果: What I am looking for

const cover = document.querySelector(".split-wrap");
(function manageCurtain() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
  }

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());

const videoPlayer = (function makeVideoPlayer() {
  "use strict";
  
    let player = null;
  
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {

    const playlist = "M7lc1UVf-VE";

    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 0,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  return {
    addPlayer
 
  };
}());

function onYouTubeIframeAPIReady() {
    const wrapper = cover.parentElement ;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget;
    show(wrapper);
  }

  cover.addEventListener("click", coverClickHandler);
}());
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;

  /* overflow: hidden; */
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
}

.slide-wrap:before,
.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.slide-wrap:before {
  left: 0;
}

.slide-wrap:after {
  right: 0;
}

.slide .slide-wrap::before {
  transform: translateX(-100%);
}

.slide .slide-wrap::after {
  transform: translateX(100%);
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
  left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.wrap,
.jacket {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.hide {
  display: none;
}
<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">

          <div class="video-wrapper">
            <div class="video-ratio-keeper">

              <div class="wrap">
                <div class="video video-frame"></div>
              </div>
            </div>
          </div>

          <div class="slide-wrap"></div>

          <div class="split-wrap">
            <div class="j1">
              <div class="jacketa" title="[ Enjoy The Music ]">
                <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                  <title>[ Enjoy The Music ]</title>
                  <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                  <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                </svg>
              </div>
            </div>
            <div class="j2">
              <div class="jacketa" title="[ Enjoy The Music ]">
                <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                  <title>[ Enjoy The Music ]</title>
                  <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                  <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

是的，我会的。 - user16466354
@csshtmljavascript14578 您想让播放按钮淡出，而不是沿着窗帘拖动吗？ - Josh
不，不要淡出，我希望您能看到播放图像超出红色边框并离开屏幕。 - user16466354
是的，我制作了一个短视频：https://streamable.com/e2cnkt - adampweb
有人能解决这个分割播放图像的问题，使其能够超过红色边框吗？这是一件难事吗？ - user16466354
显示剩余12条评论
1个回答
1
需要将您的 div class =“split-wrap” 上移，就像这样。因为在 div class =“curtain” 中是父元素，并且您使用了 overflow：hidden 。超出范围的所有子项都将被隐藏。之后，当您将其放置在 div class =“curtain” 上方时，可以添加一些分割动画。 

const cover = document.querySelector(".split-wrap");
const button = document.querySelector('.split-wrap'); // this line

(function manageCurtain() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    
    button.querySelector('.j1').classList.add('move-left'); // this line
    button.querySelector('.j2').classList.add('move-right'); // this line
    
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
  }

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());

const videoPlayer = (function makeVideoPlayer() {
  "use strict";
  
    let player = null;
  
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {

    const playlist = "M7lc1UVf-VE";

    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 0,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
    const wrapper = cover.parentElement ;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.parentElement;
    show(wrapper);
    videoPlayer.play();
  }

  cover.addEventListener("click", coverClickHandler);
}());
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;

}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;

  /* overflow: hidden; */
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
 border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;

}

.slide-wrap:before,
.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.slide-wrap:before {
  left: 0;
}
.slide-wrap:after {
  right: 0;
}
.slide .slide-wrap::before {
  transform: translateX(-100%);
}
.slide .slide-wrap::after {
  transform: translateX(100%);
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}


.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
  z-index: 100; /* This line */
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
  /* transform: translate(-350px) /* This line */
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
/*   transform: translate(350px) This line */
}

.curtain.slide .j1 {
 left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}


.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}


.wrap,
.jacket {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);

}

.hide {
  display: none;
}

/* movement class */
.move-right {
  transform: translate(350px);
}
.move-left {
  transform: translate(-350px);
}
  <div class="outer">
    <div class="tcell">
      <div class="curtain-wrapper">
        <div class="curtain-ratio-keeper">
          <div class="split-wrap">
            <div class="j1">
              <div class="jacketa" title="[ Enjoy The Music ]">
                <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                  <title>[ Enjoy The Music ]</title>
                  <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                  <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                </svg>
              </div>
            </div>
            <div class="j2">
              <div class="jacketa" title="[ Enjoy The Music ]">
                <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                  <title>[ Enjoy The Music ]</title>
                  <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                  <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                </svg>
              </div>
            </div>
          </div>
          <div class="curtain">
            <div class="video-wrapper">
              <div class="video-ratio-keeper">
                <div class="wrap">
                  <div class="video video-frame"></div>
                </div>
              </div>
            </div>

            <div class="slide-wrap"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

代码的其余部分需要更改什么？https://jsfiddle.net/skqubrL1/ - user16466354
当您单击它时，播放图像不会分裂开来。https://jsfiddle.net/0eL1mon4/ - user16466354
你是说这个做不到吗？ - user16466354
溢出必须被隐藏。 - user16466354
我并没有移除溢出，只是在“split-wrap”类中添加了z-index，在“curtain”类之上移动了div类=“split-wrap”，仅此而已。 - Anton
显示剩余12条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，