TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

点击文字/图片播放音乐,再点击暂停

老狮博主
2021-01-26
/
0 评论
/
457 阅读
/
167 个字
/
百度已收录
01/26
本文最后更新于2021年01月26日,已超过149天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

今天一整天都在折腾PJAX功能,其目的是想实现网页歌曲换页不中断的效果。找了半天都没有找到可以实现的办法,网上写的教程对于我来说是完全看不懂。然后偶然间找到了一个点击播放再点击停止音乐的教程,觉得蛮好玩的,试了一下还可以,便分享出来。

其实实现起来非常的简单,只要在页脚文件foot.php或者footer.php里最下面加入以下代码:

<script>

var bgaudiocount = 0;
        function bgaudio(){       
            ++bgaudiocount;
            if(bgaudiocount % 2 == 1){   
                document.getElementById("bgaudio").play();      
            }else{
                document.getElementById("bgaudio").pause();
            }
          
        }
</script>
<audio src="音乐地址" id="bgaudio"></audio>

然后在任何位置放入以下代码:

<span  onclick="bgaudio()">点我</span>    

然后可以简单的美化一下:

<span style="position: relative;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background: #000000;border-radius: 50%;cursor: pointer;margin-top: 15px;box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.2);-webkit-transform: scale(0);transform: scale(0);transition: -webkit-transform 0.35s;transition: transform 0.35s;transition: transform 0.35s, -webkit-transform 0.35s;"onclick="bgaudio()">点我</span>    
美化代码
朗读
赞(2)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2506.html(转载时请注明本文出处及文章链接)

评论 (0)

互动读者

  • 神话2闲逛

    评论 7 次 | 文章 0 篇

  • ptcry闲逛

    评论 3 次 | 文章 0 篇

  • 111闲逛

    评论 3 次 | 文章 0 篇

  • 火喵闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. 88闲逛
    2021-06-23
  2. 萨达萨达按时闲逛
    2021-06-23
  3. 神话6闲逛
    2021-06-23
  4. 神话2闲逛
    2021-06-21
  5. 神话2闲逛
    2021-06-21