Question

我有这段代码：

<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').play()"><i class="icon icon-play"></i></a></li>
<li><a href="javascript:void(0);" onclick="document.getElementById('video_background').pause()"><i class="icon icon-pause"></i></a></li>

创建这两个图标：http://imgur.com/L08OI7V 每个图标都运行一个不同的函数。

如何组合这两个图标，只有1个图标，图标 - 暂停可见，并且onclick会将图标更改为图标播放并仍然执行功能“document.getElementById（'video_background'）。暂停（）“

祝你好运

Answer 1

如果你想将它们保存为单个图像并且只显示一个图标（即图像的一半），你可以制作一个spritesheet。 This article解释了如何详细制作它们。您只需调整background-position，具体取决于您希望看到的图标！如果您需要更多详细信息，请与我们联系。

Answer 2

这里有一些css / js，可能会让你更接近。 http://jsfiddle.net/brocklob/6s58y/2/ 如果这没有帮助尝试重写你的问题/粘贴完整的例子。

<style>
.icon {
display: block;
width: 46px;
height: 46px;
background: url('http://i.imgur.com/L08OI7V.jpg') no-repeat;
background-position: right top;
}

.icon-play {
background-position: left top;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $('.icon').on('click', function(e) {
      $('.icon').toggleClass("icon-play");
      e.preventDefault();
    });
</script>

<button class="icon"></button>

如何将2个图标/图像合二为一？

2 个答案: