点击按钮背景更改

我正在尝试为我的HTML5音频播放器创建自定义控件。点击按钮背景更改

目前，我有我的播放/暂停按钮，但是，在被点击的按钮上，我想将当前的播放背景更改为暂停符号。

JS完美工作，只是无法弄清楚如何切换背景。

HTML5：

<div id="myButtons"> 
<button id="playpause" title="play" onclick="togglePlayPause()"></button> 
<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> 
<button id="mute" onclick="toggleMute()">Mute</button> 
</div>

的Javascript：

function togglePlayPause() { 
    var playpause = document.getElementById("playpause"); 
    if (audio.paused || audio.ended) { 
     playpause.title = ""; 
     playpause.innerHTML = ""; 
     audio.play(); 
    } 
    else { 
     playpause.title = ""; 
     playpause.innerHTML = ""; 
     audio.pause(); 
    }

来源

2013-04-21 WibblyWobbly

此外，取决于什么你想做的只有一些简单的事情可以用css完成。 http://www.cssportal.com/css3-shapes/ – Jared 2013-04-21 04:05:56

你可以使用jQuery设置CSS值

var playpause = $("#playpause"); 
var foo = false; 

    playpause.click(function(){ 
     if(foo===false){ 
     playpause.css("background", pause-background-url); 
     foo=true; 
     } 
     else{ 
      foo=false; 
     playpause.css("background", play-background-url); 
     } 
    }};

来源

2013-04-21 03:50:27 btevfik

你在哪里看到OP的代码中的jQuery？ -1 – Tadeck 2013-04-21 03:51:54

对不起，我可能不清楚解释。我目前有一个背景设置，一个播放图标。在被按下的按钮上，我希望它变成暂停图标 – WibblyWobbly 2013-04-21 03:52:35

@Tadeck虽然我会提到类似于......“如果你对jQuery确定”我喜欢在JavaScript上看到jQuery版本问题......因为绝大多数页面都使用它。由于这是一个知识共享网站，我认为即使对OP没有直接的益处，也可以在这里交流。（只是我的0.02美元） – Jared 2013-04-21 04:07:53

试试这个

function togglePlayPause() { 

     var playpause = document.getElementById("playpause"); 

     if (audio.paused || audio.ended) { 
      playpause.style.backgroundImage="url(play.png)"; 
      playpause.title = ""; 
      playpause.innerHTML = ""; 
      audio.play(); 
     } 
     else { 
      playpause.style.backgroundImage="url(pause.png)"; 
      playpause.title = ""; 
      playpause.innerHTML = ""; 
      audio.pause(); 
     } 
}

来源

2013-04-21 03:58:47

这可能是更好的，如果你只是增加一些类：

.button-icon-play { 
    background: url(...) /*other background styling stuff*/; 
} 

.button-icon-pause { 
    background: url(...) /*other background styling stuff*/; 
}

默认添加button-icon-play到你的元素，然后在你的JS，只是做：

/*Switch to pause button*/ 
playpause.className = 'button-icon-pause'; 

/*Switch to play button*/ 
playpause.className = 'button-icon-play';

来源

2013-04-21 04:00:00 zakelfassi

点击按钮背景更改

回答

相关问题