Jimdo:单击按钮创建旋转的剪辑磁盘

时间:2018-08-20 14:50:40

标签: javascript jquery html css

单击播放按钮时,我试图创建旋转的CD / Disk效果。我设法提出一个示例,请参见下面的代码。这是播放器处于播放模式时的部分状态。

我想创建的是一个正方形图像,顶部有一个播放按钮。当用户单击该按钮时,将出现“暂停”按钮,并且图像的中间部分开始旋转,就像旋转的CD /磁盘一样。

我尝试了一些尝试,但是我的JavaScript技能不足以产生这种效果。

感谢您的帮助。

注意:该代码答案应该可以在Jimdo网站构建器上使用。

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var toShow = $(element).parent().find('.btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');
    }

    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });
  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });
});
.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.img-circle {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
  animation: loading 10s linear infinite;
  width: 100%;
  max-width: 300px;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: absolute;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
  transform: translate(-50%, -53%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 50% 50%);
  -webkit-clip-path: circle(33% at 50% 50%);
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper">
  <img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>

<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
  frameborder="0" name="so" style="display: none;"></iframe>

2 个答案:

答案 0 :(得分:2)

我想这可能是您想要的。

jsFiddle with rotating Disk example

让我解释发生了什么,以便您了解代码和样式。

我添加了两次相册图像,一个是背景,一个用于创建旋转磁盘。看起来像这样。

<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle -clipped">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">

您看不到剪切的图像,只有在动画开始时才会注意到。

单击播放器后,将添加-rotating类以开始动画。

// Find the clippedImg and add the class -rotating to start the  animation
var clippedImg = $(element).parent().find('.-clipped')[0];
$(clippedImg).addClass('-rotating');

单击暂停按钮后,-rotating类将被删除。

让我知道您是否正在寻找

答案 1 :(得分:1)

我相信您应该能够使用css属性animation-play-state: paused;

$(function() {
  var activePlayerStartBtn;

  function stopOtherPlayerSetNewAsActive(element) {
    var toShow = $(element).parent().find('.btn.hide')[0];
    $(element).addClass('hide');
    $(toShow).removeClass('hide');
    $('.img-circle').removeClass('paused');

    if (activePlayerStartBtn) {
      var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
      $(stopButton).addClass('hide');
      $(activePlayerStartBtn).removeClass('hide');
    }

    activePlayerStartBtn = element;
  }

  function stopPlayer(element) {
    $(element).addClass('hide');
    $(activePlayerStartBtn).removeClass('hide');
    $('.img-circle').addClass('paused');
    activePlayerStartBtn = null;
  }

  var widget1 = SC.Widget("so");
  $("#playSound").click(function() {
    widget1.play();
    stopOtherPlayerSetNewAsActive("#playSound");
  });
  $("#stopSound").click(function() {
    widget1.pause();
    stopPlayer('#stopSound');
  });
});
.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.img-circle {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
  animation: loading 10s linear infinite;
  width: 100%;
  max-width: 300px;
}

.paused {
  animation-play-state: paused;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: absolute;
  width: 100%;
  max-width: 70px;
  cursor: pointer;
  transform: translate(-50%, -53%);
  top: 50%;
  left: 50%;
  opacity: .7;
  clip-path: circle(33% at 50% 50%);
  -webkit-clip-path: circle(33% at 50% 50%);
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>

<div class="button-wrapper">
  <img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle paused">
  <img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
  <img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>

<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
  frameborder="0" name="so" style="display: none;"></iframe>