


今天给大家分享下本站旋转音乐的教程,很简单,方法也有点笨拙,大家不喜勿喷。

第一步:将以下代码放到scroll.php文件中的最上面即可
- <!–音乐–>
- <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>
- <div class=“btnAudio” id=“btnAudio”><li><a class=“scroll-k” title=“<?php _e( ‘本站音乐‘, ‘begin’ ); ?>”><i class=“fa-music fa”></i></a></li></div>
- <script>
- if( window.hermitjs !== undefined ){
- hermitjs.reload(1) //不会打断播放,音乐会继续播放
- }
- var bg_audio_val = true;
- var bg_audio = new Audio();
- function audio_init(){
- var options_audio = {
- loop: true,
- preload: “auto”,
- src: $(‘.u-audio’).attr(‘data-src’)
- }
- for (var key in options_audio) {
- bg_audio[key] = options_audio[key];
- }
- bg_audio.load();
- audio_addEvent();
- bg_audio.pause();
- }
- function audio_addEvent(){
- $(“#btnAudio”).on(‘click’, audio_control);
- $(bg_audio).on(‘play’,function(){
- bg_audio_val = false;
- $(‘#btnAudio’).addClass(‘fa-spin’);
- })
- $(bg_audio).on(‘pause’,function(){
- $(‘#btnAudio’).removeClass(‘fa-spin’);
- })
- }
- function audio_control(){
- if(!bg_audio_val){
- bg_audio.pause();
- bg_audio_val = true;
- }else{
- bg_audio.play();
- }
- }
- audio_init();
- </script>
第二步:将以下代码放到style.css中即可
- .btnAudio{position:fixed;right:10px;top:130px;overflow:hidden;z-index:1050}
草草的看了下代码,应该可以实现,如果还有问题,请在下方留言,看到第一时间更新文章,谢谢大家的支持!



亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
文章评论 本文章有个评论