html - 替换移动版网站中的图标
问题描述
我有一个带有音轨的块,我想用一个播放/停止图标替换所有曲目。我怎样才能做到这一点?
.lesson-item {
max-width: 100%;
transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
cursor: pointer;
transform-origin: left top;
}
.lesson-item:after {
content: '';
clear: both;
display: block;
}
.img {
background-size: cover;
float: left;
margin-right: 1rem;
width: 100px;
height: 100px;
transition: height 300ms, width 300ms;
transform-origin: left top;
}
<div class="lesson-item">
<div class="img" style="background-image: url(https://dummyimage.com/100x100/000/fff)"></div>
<div class="description">
<div class="player">
<audio preload="auto" controls>
<source src="assets/audio.mp3" />
<source src="assets/audio.ogg" />
<source src="assets/audio.wav" />
</audio>
</div>
</div>
<div class="bottom">
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
</div>
</div>
我只需要一个图标播放/停止而不是所有曲目。
解决方案
工作示例:https ://jsfiddle.net/laber/jhugx58y/22/
function togglePlay(video) {
var audio = document.getElementsByTagName("audio")[0];
if (audio) {
if (audio.paused) {
audio.play();
document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149658.svg";
} else {
audio.pause();
document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149657.svg";
}
}
}
.lesson-item {
max-width: 100%;
transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
cursor: pointer;
transform-origin: left top;
}
.lesson-item:after {
content: '';
clear: both;
display: block;
}
.img {
background-size: cover;
float: left;
margin-right: 1rem;
width: 100px;
height: 100px;
transition: height 300ms, width 300ms;
transform-origin: left top;
}
#button {
width:20px;
}
<div class="lesson-item">
<div class="img" style="background-image: url(https://dummyimage.com/100x100/000/fff)"></div>
<div class="description">
<div class="player">
<img src="https://image.flaticon.com/icons/svg/149/149657.svg" onclick="togglePlay(this)" id="button">
<audio preload="auto">
<source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
<source src="assets/audio.ogg" />
<source src="assets/audio.wav" />
</audio>
</div>
</div>
<div class="bottom">
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
</div>
</div>
推荐阅读
- python - 如何转发来自 django 的原始电子邮件
- json - 发生 406 错误。由于输入结束错误,没有要映射的内容
- javascript - 是否有解析 svg 路径的标准?
- laravel - Laravel mix 不会生成 sourceMaps
- excel - 使用存储在范围中的值从文件夹中打开文件
- selenium-webdriver - 无法使用本地 BrowserStack、BrowserMobProxy 嵌入模式和使用 java 的 Selenium 3.x 捕获浏览器网络日志
- java - 如何在 Java 中使用方法和数组添加排序
- java - 如何使用带有服务器 IP 的 JDBC 连接到 Mongodb?
- c - 在 C 中声明匿名结构的局部 const 变量
- bash - 查找包含至少三个字母实例的单词