这是小提琴:
当用户单击播放按钮时,我想让记录上的记录针像您在下图中看到的那样旋转到记录上(见小提琴)
针的位置不一定是最终的,我可能希望它位于右上角。(我已经包含了所需的图像和底部的 css)
现在,如果您单击播放(请参阅小提琴,将鼠标悬停在其中一个唱片封面上,单击播放),唱片针从左侧进入,然后如果您单击同一唱片上的停止,它会回到左侧。如果您在停止播放之前单击另一条记录的播放,它只会停留在同一位置。
我希望它像下面的图像一样,它始终显示但不在记录中,除非您单击播放按钮然后它会旋转。然后,如果您在另一张唱片正在播放时单击另一张唱片上的播放,它只会像它的变化一样移动/移动。然后,当然,如果您单击停止,它就会消失。
这是我当前的脚本:
$(function(){
var station = $('.player-station'),
record = $('.record2:first'),
playBtns = $('.play'),
info = $('.nprecinfo');
var isPlaying = false;
playBtns.click(function()
{
var btn = $(this);
if(btn.text() == 'STOP')
{
btn.text('PLAY');
record.css({'-webkit-animation-play-state': 'paused',
'-moz-animation-play-state': 'paused'});
$('#needle').show().animate({"left": "-=120px"}, "slow");
isPlaying = false;
return;
};
playBtns.text('PLAY');
var album = btn.closest('.album');
station.text(album.find('h3').text());
info.text(album.find('.recordinfo').text());
record.css({'-webkit-animation-play-state': 'running',
'-moz-animation-play-state': 'running'});
if (isPlaying == false)
{
$('#needle').show().animate({"left": "+=120px"}, "slow");
isPlaying = true;
}
$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
$('#lrvinyl').hide().fadeIn();
btn.text('STOP');
});
});
这是记录针的当前css:
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}
如果你想把针放在右上角,这里是在小提琴中使用的图像和 css。您可能需要
(.record2)
稍微移动记录,因此只需将 css 更改为left:-4px;
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle4.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:205px;
top:10px;
z-index:10;
overflow:hidden;
}