Loading
0

wordpress站点旋转音乐教程

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器
今天给大家分享下本站旋转音乐的教程,很简单,方法也有点笨拙,大家不喜勿喷。

第一步:将以下代码放到scroll.php文件中的最上面即可

  1. <!–音乐–>
  2. <section class=“u-audio hidden” data-src=“http://cdn.qimok.cn/Xun%28%E6%98%93%E7%A1%95%E6%88%90%29%20-%20%E6%88%91%E6%98%AF%E4%BD%A0%E7%9A%84%E5%BD%B1%E5%AD%90.mp3”></section>
  3. <div class=“btnAudio” id=“btnAudio”><li><a class=“scroll-k” title=“<?php _e( ‘本站音乐‘, ‘begin’ ); ?>”><i class=“fa-music fa”></i></a></li></div>
  4. <script>
  5. if( window.hermitjs !== undefined ){
  6. hermitjs.reload(1//不会打断播放,音乐会继续播放
  7. }
  8. var bg_audio_val = true;
  9. var bg_audio = new Audio();
  10. function audio_init(){
  11.         var options_audio = {
  12.                 loop: true,
  13.                 preload: “auto”,
  14.                 src: $(‘.u-audio’).attr(‘data-src’)
  15.         }
  16.         for (var key in options_audio) {
  17.                 bg_audio[key] = options_audio[key];
  18.         }
  19.         bg_audio.load();
  20.         audio_addEvent();
  21.         bg_audio.pause();
  22. }
  23. function audio_addEvent(){
  24.         $(“#btnAudio”).on(‘click’, audio_control);
  25.         $(bg_audio).on(‘play’,function(){
  26.                 bg_audio_val = false;
  27.                 $(‘#btnAudio’).addClass(‘fa-spin’);
  28.         })
  29.         $(bg_audio).on(‘pause’,function(){
  30.                 $(‘#btnAudio’).removeClass(‘fa-spin’);
  31.         })
  32. }
  33. function audio_control(){
  34.         if(!bg_audio_val){
  35.                 bg_audio.pause();
  36.                 bg_audio_val = true;
  37.         }else{
  38.                 bg_audio.play();
  39.         }
  40. }
  41. audio_init();
  42. </script>

第二步:将以下代码放到style.css中即可

  1. .btnAudio{position:fixed;right:10px;top:130px;overflow:hidden;z-index:1050}
草草的看了下代码,应该可以实现,如果还有问题,请在下方留言,看到第一时间更新文章,谢谢大家的支持!
技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18679-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?

最后编辑于:2019-04-25 11:19:59作者:

上一篇:wordpress安装WP-PostViews Plus插件,显示文章的阅读次数
下一篇:知更鸟主题“关于本站”小工具头像的居中布局美化