后盾之網頁背景音樂 · TP5常用代碼

## 知識點 1、觸摸事件 2、旋轉的音樂圖標 3、背景音樂效果的控制 4、移動端css兼容性的解決思路 5、移動端音樂自動播放的處理方法 6、相關視頻下載 [TOC] ## 一、觸摸事件 HTML5實戰與剖析之觸摸事件(touchstart、touchmove和touchend) HTML5中新添加了很多事件，但是由于他們的兼容問題不是很理想，應用實戰性不是太強，所以在這里基本省略咱們只分享應用廣泛兼容不錯的事件，日后隨著兼容情況提升以后再陸續添加分享。今天為大家介紹的事件主要是觸摸事件：touchstart、touchmove和touchend。 touchstart事件：當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發。 touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動。 touchend事件：當手指從屏幕上離開的時候觸發。 touchcancel事件：當系統停止跟蹤觸摸的時候觸發。關于這個事件的確切出發時間，文檔中并沒有具體說明，咱們只能去猜測了。后盾CSS3視頻教程 https://www.bilibili.com/video/av30185117/?p=68 后盾CSS3視頻教程 http://www.houdunwang.com/houdunren18_lesson_254?vid=11990 懶人原生css3可控旋轉音樂播放按鈕 http://www.lanrenzhijia.com/js/css3/3064.html ## 二、旋轉的音樂圖標 ### 1、結構 ~~~ <img src="../static/index/default/images/music.svg" id="mpic"> <audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" autoplay="" preload="" id="music"></audio> ~~~ ### 2、引入文件樣式文件 jQuery文件 ### 3、功能實現 ~~~ $('#mpic').on('touchstart',function(){ console.log('touchstart'); }); $('#mpic').on('touchend',function(){ console.log('touchend'); }) ~~~ ## 三、背景音樂效果的控制 ### 暫停或切換當m=1時，背景旋轉，音樂播放當m=2時，背景停止，音樂停止 ~~~ <script> var m=1; $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); m=1; } }); </script> ~~~ ### 暫停播放音樂 ~~~ 原生寫法pause() document.getElementById('music').pause(); jQuery對象轉換原生寫法 $('#music')[0].pause(); ~~~ ### 播放音樂 ~~~ $('#music')[0].play(); ~~~ ### 完整代碼 ~~~ <script> var m=1; $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); $('#music')[0].pause(); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; } }); </script> ~~~ ## 四、移動端css兼容性的解決思路 ~~~ #mpic{ width: 45px; height: 45px; position: fixed; left: 62px; top: 88px; z-index: 200; -webkit-animation: r 5s linear infinite; -moz-animation: r 5s linear infinite; -o-animation: r 5s linear infinite; animation: r 5s linear infinite; } @-webkit-keyframes r { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @-moz-keyframes r { from{ -moz-transform: rotate(0deg); } to{ -moz-transform: rotate(360deg); } } @-o-keyframes r { from{ -o-transform: rotate(0deg); } to{ -o-transform: rotate(360deg); } } @keyframes r { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } ~~~ ## 五、移動端音樂自動播放的處理方法所有移動端都是禁止自動播放的，即禁止autoplay屬性 ### 1、去掉HTMLautoplay屬性 ~~~ <audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" id="music"></audio> ~~~ ### 2、CSS添加停止屬性 ~~~ #mpic{ width: 45px; height: 45px; position: fixed; left: 62px; top: 88px; z-index: 200; -webkit-animation: r 5s linear infinite; -moz-animation: r 5s linear infinite; -o-animation: r 5s linear infinite; animation: r 5s linear infinite; animation-play-state:paused; } @-webkit-keyframes r { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @-moz-keyframes r { from{ -moz-transform: rotate(0deg); } to{ -moz-transform: rotate(360deg); } } @-o-keyframes r { from{ -o-transform: rotate(0deg); } to{ -o-transform: rotate(360deg); } } @keyframes r { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } ~~~ ### 3、功能實現 ~~~ <script> var m=2; document.ontouched = function(){ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; document.ontouched = null; } $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); $('#music')[0].pause(); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; } }); </script> ~~~ ### 4、升級事件可以改寫成one事件：鍵盤事件和單擊事件，限制只執行一次 ~~~ document.one('touchend',function(){ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; }; ) ~~~ ## 六、相關視頻下載 1、騰訊微云 ~~~ 已上傳至微云 ~~~ 2、百度網盤