本站旋转音乐教程

本文预计阅读时间 5 分钟
七墨今天给大家分享下本站旋转音乐的教程,很简单,方法也有点笨拙,大家不喜勿喷。

第一步:将以下代码放到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}
草草的看了下代码,应该可以实现,如果还有问题,请在下方留言,看到第一时间更新文章,谢谢大家的支持!
weinxin
七墨微信
请留下您宝贵的意见,或者每天来本站的文章页面签到,七墨将不胜感激~~
七墨

来一发,更加快活

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  3   博主  0

    • 怪咖小青年 怪咖小青年 0

      好东西

      • 老鹰主机 老鹰主机 1

        朋友 交换链接吗

        • 老鹰主机 老鹰主机 1

          便宜 交换链接买