纯 HTML/CSS
label.tog > input {
display: none; /* Hide the checkbox */
}
label.tog > input + span {
text-indent: -9000px; /* Make text Accessible but not visible */
display: inline-block;
width: 24px;
height: 24px;
background: center / contain no-repeat url("//i.stack.imgur.com/gmP6V.png"); /*Play*/
}
label.tog > input:checked + span {
background-image: url("//i.stack.imgur.com/ciXLl.png"); /*Pause*/
}
<label class="tog">
<input type="checkbox" checked>
<span>Button Play Pause</span>
</label>
使用 jQuery 切换内部跨度的图像
有用的原因是服务器没有新的请求来加载图像:
<span class="tog">
<img src="play.png">
<img src="pause.png" style="display:none;">
</span>
$(".tog").click(function(){
$('img',this).toggle();
});
或者,假设我们有这个 HTML 和.tog
图像选择器:
<img class="tog" src="play.png"/>
使用 Array.prototype.reverse()
var togSrc = [ "play.png", "pause.png" ];
$(".tog").click(function() {
this.src = togSrc.reverse()[0];
});
使用当前src
值和String.prototype.match()
如果您不知道初始状态(播放?暂停?),这很有用
var togSrc = [ "play.png", "pause.png" ];
$(".tog").click(function() {
this.src = togSrc[ this.src.match('play') ? 1 : 0 ];
});
注意:对于最后两个示例,您需要预先加载图像,以防止浏览器在从服务器请求和加载新图像时产生时间间隔。