测试下小辣椒的图片按钮

马黑黑

 

马黑黑

代码还有点粗糙，可以改进下。

播放没有设置循环，主要目的用于观察播放完毕按钮的变更情况。按钮的变更预设如下：

点播放后，按钮变成暂停图样，点暂停，变为播放图样，播放完毕，自动变回播放图样。

按钮还有一丝丝的鼠标响应效果，请体会。代码在下楼公布

马黑黑

代码分享：

1. <style type="text/css">
   
2. .picBtn {
   
3.         width: 32px;
   
4.         height: 32px;
   
5.         border: none;
   
6.         border-radius: 8px;
   
7.         background: transparent url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png') no-repeat;
   
8.         cursor: pointer;
   
9.         box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
   
10. }
    
11. 
    
12. .picBtn:hover {
    
13.         opacity: 0.95;
    
14.         box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
    
15. }
    
16. 
    
17. #picBtn:active {
    
18.         opacity: 0.8;
    
19.         box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
    
20. }
    
21. 
    
22. </style>
    
23. 
    
24. <p><audio id="music" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls"></audio><br> </p>
    
25. <button id="picBtn" class="picBtn"></button>
    
26. 
    
27. <script language="javascript">
    
28. 
    
29. var mu = document.getElementById('music');
    
30. var btn = document.getElementById('picBtn');
    
31. 
    
32. btn.onclick = function(){
    
33.         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')");
    
34. }
    
35. 
    
36. mu.addEventListener("ended", function(){
    
37.         btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202201/15/215718gtucyrf8cj8xxff8.png')";
    
38. })
    
39. 
    
40. </script>

复制代码

马黑黑

@小辣椒

加林森

这个播放器漂亮的。跟到老黑学习真好！

马黑黑

加林森 发表于 2022-1-16 11:32
这个播放器漂亮的。跟到老黑学习真好！

播放器是默认的，按钮才是打造的东东

红影

有了这个，就可以随意更换自己想要的图片进去做成各式按钮了，这个真棒

红影

黑黑太棒了，简直无所不能，必须送上掌声和鲜花

加林森

马黑黑 发表于 2022-1-16 11:42
播放器是默认的，按钮才是打造的东东

嗯嗯

马黑黑

加林森 发表于 2022-1-16 12:11
嗯嗯

马黑黑

红影 发表于 2022-1-16 11:57
黑黑太棒了，简直无所不能，必须送上掌声和鲜花

感谢掌声和鲜花，但不要搞个人崇拜

马黑黑

红影 发表于 2022-1-16 11:56
有了这个，就可以随意更换自己想要的图片进去做成各式按钮了，这个真棒

嗯，你能这么说，说明你的进步不是一班的大

小辣椒

谢谢黑黑，太强大了
小辣椒一直在想咋不早认识黑黑呢，相见恨晚的感觉

今天下午要去看病，回家后再上来学习了。

小辣椒

播放器按钮还加了点击阴影出来，我手机都可以看清这个效果，真棒

马黑黑

小辣椒 发表于 2022-1-16 13:37
播放器按钮还加了点击阴影出来，我手机都可以看清这个效果，真棒

细小的修饰，还不够精致

红影

马黑黑 发表于 2022-1-16 13:15
感谢掌声和鲜花，但不要搞个人崇拜

昨天和小辣椒还在说，要是能把按钮图片弄进去就好了，结果今天就看看到。太开心了。看到帖子的瞬间就赶紧发给她看了，她也很开心，只是她忙着，暂时还上不了。

红影

马黑黑 发表于 2022-1-16 13:21
嗯，你能这么说，说明你的进步不是一班的大

我是二班的，哈哈，借你名言一用

加林森

马黑黑 发表于 2022-1-16 13:14

马黑黑

红影 发表于 2022-1-16 14:11
昨天和小辣椒还在说，要是能把按钮图片弄进去就好了，结果今天就看看到。太开心了。看到帖子的瞬间就赶紧 ...

其实元素都是可以有底图的，想想应该能判断

小辣椒

马黑黑 发表于 2022-1-16 13:51
细小的修饰，还不够精致

黑黑，发现用图片只能是方型的，就是我圆的按钮但图片png格式加的效果也是出来方的，是不是这样的？