测试下小辣椒的图片按钮
本帖最后由 马黑黑 于 2022-1-16 09:53 编辑 <br /><br /><style type="text/css">.picBtn {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png') no-repeat;
cursor: pointer;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
opacity: 0.95;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
#picBtn:active {
opacity: 0.8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}
</style>
<p><audio id="music" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls"></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215703hnizi2b2uucxi1iz.png')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png')";
})
</script> 代码还有点粗糙，可以改进下。
播放没有设置循环，主要目的用于观察播放完毕按钮的变更情况。按钮的变更预设如下：
点播放后，按钮变成暂停图样，点暂停，变为播放图样，播放完毕，自动变回播放图样。
按钮还有一丝丝的鼠标响应效果，请体会。代码在下楼公布 代码分享：
<style type="text/css">
.picBtn {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png') no-repeat;
cursor: pointer;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
opacity: 0.95;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
#picBtn:active {
opacity: 0.8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}
</style>
<p><audio id="music" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls"></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215703hnizi2b2uucxi1iz.png')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png')";
})
</script>
@小辣椒 这个播放器漂亮的。跟到老黑学习真好！ 加林森 发表于 2022-1-16 11:32
这个播放器漂亮的。跟到老黑学习真好！
播放器是默认的，按钮才是打造的东东 有了这个，就可以随意更换自己想要的图片进去做成各式按钮了，这个真棒{:4_199:} 黑黑太棒了，简直无所不能，必须送上掌声和鲜花{:4_199:} 马黑黑 发表于 2022-1-16 11:42
播放器是默认的，按钮才是打造的东东
嗯嗯 加林森 发表于 2022-1-16 12:11
嗯嗯
{:4_181:} 红影 发表于 2022-1-16 11:57
黑黑太棒了，简直无所不能，必须送上掌声和鲜花
感谢掌声和鲜花，但不要搞个人崇拜{:4_170:} 红影 发表于 2022-1-16 11:56
有了这个，就可以随意更换自己想要的图片进去做成各式按钮了，这个真棒
嗯，你能这么说，说明你的进步不是一班的大{:4_170:} 谢谢黑黑，太强大了{:4_178:}
小辣椒一直在想咋不早认识黑黑呢，相见恨晚的感觉{:4_172:}
今天下午要去看病，回家后再上来学习了。
播放器按钮还加了点击阴影出来，我手机都可以看清这个效果，真棒{:4_199:} 小辣椒 发表于 2022-1-16 13:37
播放器按钮还加了点击阴影出来，我手机都可以看清这个效果，真棒
细小的修饰，还不够精致 马黑黑 发表于 2022-1-16 13:15
感谢掌声和鲜花，但不要搞个人崇拜
昨天和小辣椒还在说，要是能把按钮图片弄进去就好了，结果今天就看看到。太开心了。看到帖子的瞬间就赶紧发给她看了，她也很开心，只是她忙着，暂时还上不了。 马黑黑 发表于 2022-1-16 13:21
嗯，你能这么说，说明你的进步不是一班的大
我是二班的，哈哈，借你名言一用{:4_173:} 马黑黑 发表于 2022-1-16 13:14
{:4_190:} 红影 发表于 2022-1-16 14:11
昨天和小辣椒还在说，要是能把按钮图片弄进去就好了，结果今天就看看到。太开心了。看到帖子的瞬间就赶紧 ...
其实元素都是可以有底图的，想想应该能判断 马黑黑 发表于 2022-1-16 13:51
细小的修饰，还不够精致
黑黑，发现用图片只能是方型的，就是我圆的按钮但图片png格式加的效果也是出来方的，是不是这样的？
页:
[1]
2