如何在音乐播放器开始使用JavaScript时更改CSS属性？

我有我的页面上的音乐播放器的代码是这样的：如何在音乐播放器开始使用JavaScript时更改CSS属性？

<!--SCM Music Player by Adrian C Shum - http://scmplayer.net--> 
<script type="text/javascript" src="http://scmplayer.net/script.js" ></script> 
<script type="text/javascript"> 
SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}"); 
</script> 
<!--End of SCM Music Player script-->

我也有两个图像，代码看起来像这样：

<html> 
<head> 
<style type="text/css"> 

#img1{ 
    position: fixed; 
    right: 10px; 
    bottom: 100px; 
    z-index: 10; 
    visibility:hidden; 
} 

#img2{ 
    position: fixed; 
    left: 10px; 
    top: 10px; 
    z-index: 10; 
    visibility:hidden; 
} 

</style> 
</head> 

<body> 
    <img src="IMAGE1.png" id="img1"> 
    <img src="IMAGE2.png" id="img2"> 
</body> 
</html>

我想这样就可以在玩家开始时变得“可见”。我需要添加/取出/替换这个工作？

来源

2012-10-05 Rigel Turdiu

使用jQuery，我会写这段JavaScript代码

<script> 
    function ChangeCSS() 
    { 
     $('#img1').css({ //new css style goes here 
         z-index : 10 
         }); 
</script> 
// in your init method there is onPlay method use it to call this function.

来源

2012-10-05 20:15:35

这将取决于SCMPlayer是否给你指定一个基本上是一段代码，该播放器调用时的能力“回调”发生某种事件。

另一种方法是使用一组外部控件来管理播放器，然后附上你的代码。 SCMPlayer的文档（http://scmplayer.net/#api）给出了如何通过点击来调用播放/暂停的说明。你可以调整它来调用一个自定义函数，它可以适当地设置项目的可见性。

虽然你没有在你的原始问题中指定它，但jQuery使得DOM元素的操作非常简单。你会想看看它是否适合你的情况。 :)

来源

2012-10-05 20:18:33 Palpatim

有一个onPlay回调。你可以使用它。

未经测试示例代码：

function displayElement(id) { 
    document.getElementById(id).style.visibility = 'visible'; 
} 

onplay: function() { 
    displayElement('img1'); 
    displayElement('img2'); 
}

来源

2012-10-05 20:19:39

我会放在哪里，在代码中，我已经提供有关系吗？ –

如何在音乐播放器开始使用JavaScript时更改CSS属性？

回答

相关问题