单击播放按钮时,我试图创建旋转的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&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>
答案 0 :(得分:2)
我想这可能是您想要的。
让我解释发生了什么,以便您了解代码和样式。
我添加了两次相册图像,一个是背景,一个用于创建旋转磁盘。看起来像这样。
<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&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>