SS3旋轉圖標特效，常用在企業網站展示欄中，會應用到不同的特效來展現頁面的用戶體驗效果！

如下圖：鼠標移上去后會出現圖標旋轉背景色變幻效果

實現代碼

html結構：

css樣式：

至于圖標大家可以用自己平時積累的或者需求設計稿里面的，這里只是演示，不一定是跟你的需求圖標一樣的哈！

js代碼：

節實現了：

• 歌曲切換
• 圖標轉動
• 顯示歌曲信息

下一節計劃：

• 添加音軌
• 進度條

小demo已經寫好，不用擔心跳票啥的。

繼續上一節的內容，我們在繪制好播放器的雛形之后，就可以考慮將一些工具性質的方法封裝起來了，比如，我們多次用到dom和_center方法，不如將它們歸為一類，做為一個工具包來調用。

上代碼：

var utils = {
 _center : function(dom){
 dom.style.position = 'absolute';
 dom.style.top = '50%';
 dom.style.left = '50%';
 dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
 dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
 },
 
 dom : function(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
 },
}

然后我們就可以這樣調用了：

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom); 
utils._center(musicIcon);

util是工具的意思，這樣是不是清晰多了呢？

然后進行js打包：

引入：

<script type="text/javascript" src="js/util.js"></script>

用閉包的形式將util包裹起來，再掛在window對象下面，以防止命名重復。一個簡單的工具包就這樣做好啦！

;(function(win){
 var utils = {
 _center : function(dom){
 dom.style.position = 'absolute';
 dom.style.top = '50%';
 dom.style.left = '50%';
 dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
 dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
 },
 
 dom : function(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
 },
 }
 
 win.utils = utils;
})(window);

同時，我們把css也單獨整出去，不要放在頁面里，那樣會顯得頁面特別龐大，頁面應該整潔和精簡。當一個模子畫出來之后，我一般都會將css整出去。

.music {
 width: 200px;
 height:300px;
 background:#333;
 border-radius: 5px;
 box-shadow: 3px -3px 1px #666;
 position: relative; /*center方法已經將position設置為absolute了，這一行不起作用*/
}
.music .screen {
 height:70%;
 width:96%;
 background: linear-gradient(#403d3d,65%,#5f5b5b);
 margin-left:2%;
 margin-top: 2%;
 position: relative;
 
}
.music .screen i {
 color:#fff;
 font-size: 88px;
}
.music .buttons i {
 color:#fff;
 font-size: 24px;
 margin-left: 28px;
 position: relative;
 top:25px;
}
.music .buttons i:hover {
 cursor: pointer;
}
.music .buttons {
 height:25%;
 width:96%;
 margin-left:2%;
 margin-top: 2%;
}

<link rel="stylesheet" type="text/css" href="css/index.css"/>

這樣一來，頁面就簡潔多了！

接下來，讓我們愉快地開發功能吧！

1. 開始和暫停按鈕之間的切換

/* 獲取開始按鈕 */
var playDom = utils.dom('#play');

然后，給它綁定一個點擊事件

playDom.onclick = function(){
 alert('play');
}

這說明綁定事件成功了。

將暫停按鈕加上去，默認是隱藏的。

上一節中出現了圖標編碼格式沖突的問題，因此我把iconfont的引入改成了下面的方式：

<i id='pause' class="iconfont icon-zanting" style="display:none"></i>

按鈕切換的邏輯代碼：

/* 獲取開始按鈕 */
var playDom = utils.dom('#play');
/* 獲取暫停按鈕 */
var pauseDom = utils.dom('#pause');
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
}
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
}

效果（截屏效果一般，漸變色沒顯示，大伙先將就著看吧）：

2. 音樂播放和暫停

還記得上一節封裝的musicBox對象嗎？

播放和暫停的核心方法是這樣的：

play : function(index){
 this.musicDom.src = this.songs[index];
 this.musicDom.play();
},
//暫停音樂
stop : function(){
 this.musicDom.pause();
},

3. 代碼重構和歌曲切換的實現

今天，我對musicBox進行了一次簡單的重構，代碼如下：

var musicBox= {
 
 musicDom : null, //播放器對象
 songs : [], //歌曲目錄，用數組來存儲
 index : 0, //當前播放的歌曲索引
 
 //初始化音樂盒
 init : function(themeIndex){
 this.musicDom = document.createElement('audio');
 document.body.appendChild(this.musicDom);
 },
 
 //添加一首音樂
 add : function(src){
 this.songs.push(src);
 },
 
 //根據數組下標決定播放哪一首歌
 play : function(){
 this.musicDom.src = this.songs[this.index];
 this.musicDom.play();
 
 },
 
 //暫停音樂
 stop : function(){
 this.musicDom.pause();
 },
 
 //下一首
 next : function(){
 var len = this.songs.length;
 //判斷是否是有效的索引
 if((this.index + 1) >= 0 && this.index < len){
 this.index ++;
 //如果已經是最后一首，就跳到第一首
 if(this.index == len){ 
 this.index = 0;
 }
 this.play();
 }
 },
 
 //上一首
 prev : function(){
 var len = this.songs.length;
 //判斷是否是有效的索引
 if((this.index + 1) >= 0 && this.index < len){
 //如果已經是第一首，就跳到最后一首
 if(this.index == 0){
 this.index = len;
 }
 this.index --;
 this.play();
 }
 }
 
}

不同點如下：

1.添加音樂索引index，取消了play方法的參數。

2.實現了上一首和下一首的邏輯代碼

3.默認音樂為第一首

順便添加了幾首音樂。

現在我們就來調用看看吧，當點擊播放按鈕的時候，就播放指定的歌曲。點擊暫停按鈕就停止播放。

4. 測試

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom); 
utils._center(musicIcon);
musicBox.init(); //初始化
musicBox.add('mp3/火影忍者主題曲.mp3');
musicBox.add('mp3/曲婉婷 - 我的歌聲里.mp3');
musicBox.add('mp3/夜空中最亮的星.mp3');
musicBox.add('mp3/班得瑞 - 雪之夢.mp3');
musicBox.add('mp3/超級好聽的龍貓輕音樂.mp3');
/* 獲取開始按鈕 */
var playDom = utils.dom('#play');
/* 獲取暫停按鈕 */
var pauseDom = utils.dom('#pause');
/* 獲取下一首按鈕 */
var nextDom = utils.dom('#next');
/* 獲取上一首按鈕 */
var prevDom = utils.dom('#prev');
//播放按鈕
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
 //播放音樂
 musicBox.play();
}
//暫停按鈕
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
 musicBox.stop();
}
//下一首
nextDom.onclick = function(){
 musicBox.next();
 //當直接點擊下一首的時候，同時改變播放按鈕為暫停的樣式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
}
//上一首
prevDom.onclick = function(){
 musicBox.prev();
 //當直接點擊下一首的時候，同時改變播放按鈕為暫停的樣式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
}

成功運行起來了，雖然有聲音，但是還看不出屏幕的變化，所以，接下來，我們做一點有趣的事情。

5. 隨著歌曲的播放，讓音樂圖標轉動起來

關于這個，就需要用到css3的一個知識點了，就是關鍵幀。因為不是專門開貼講解css3，所以這邊我就簡單說明一下了。

像這樣：

@keyframes move{
 0% {transform: rotate(0deg)}
 100% {transform: rotate(360deg)}
}
.r {
 animation: move 1s linear infinite;
}

簡單來說，就是我們定義了一個名字叫r的class，動畫效果采用名字叫move的關鍵幀。transform是轉換的意思，因為英文詞根trans就有從一個狀態變到另一個狀態的涵義，這是比較好理解的，而deg是角度的意思。

@keyframes move{
 0% {transform: rotate(0deg)}
 100% {transform: rotate(360deg)}
}

用以上這段代碼，我們制作了一個關鍵幀動畫，名字叫move，它將一個元素的位置從0度變化到360度，就是轉了一圈。

.r {
 animation: move 1s linear infinite;
}

• liner表示線性，這個屬性會讓擁有該class的dom元素連續地旋轉。
• infinite表示不停止、無限，不然的話轉一圈就結束了。

現在，我們給音樂圖標加上轉動樣式：

<i id='music-icon' class="iconfont icon-yinle r"></i>

在這里我去掉了該元素的定位方法，而繼續采用css的方式來居中。

.music .screen i {
 color:#fff;
 font-size: 88px;
 position: absolute;
 left: 50%;
 top : 50%;
 margin-left: -40px;
 margin-top: -48px;
}

截圖原因，效果看起來不咋地，其實它的轉動是非常平滑的，我也不清楚為啥截圖后變成了這個樣子。

終于轉起來了，核心的操作就是給圖標添加一個css類而已。

現在，我們希望在點擊開始按鈕的時候，就轉動圖標。點擊暫停就移除轉動的css類。

先給util工具包擴展下面這幾個方法：

/*判斷dom元素是否擁有某個class類*/
hasClass : function(obj, cls) {
 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
 }, 
 
/*給dom元素增加某個class類*/
addClass : function(obj, cls) { 
 if (!this.hasClass(obj, cls)) obj.className += " " + cls; 
}, 
/*移除dom元素中的某個class類*/
removeClass : function(obj, cls) { 
 if (this.hasClass(obj, cls)) { 
 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
 obj.className = obj.className.replace(reg, ' '); 
 } 
}, 
/*該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果。*/
toggleClass : function(obj,cls){ 
 if(hasClass(obj,cls)){ 
 removeClass(obj, cls); 
 }else{ 
 addClass(obj, cls); 
 } 
}

6. 重寫后的按鈕事件

//播放按鈕
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
 //播放音樂
 musicBox.play();
}
//暫停按鈕
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
 utils.removeClass(musicIcon,'r');
 musicBox.stop();
}
//下一首
nextDom.onclick = function(){
 musicBox.next();
 //當直接點擊下一首的時候，同時改變播放按鈕為暫停的樣式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
}
//上一首
prevDom.onclick = function(){
 musicBox.prev();
 //當直接點擊下一首的時候，同時改變播放按鈕為暫停的樣式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
}

效果：

7. 顯示正在播放的音樂

.music .info {
 position: absolute;
 display: inline-block;
 width: 80%;
 height: 30px;
 left: 15px;
 top: 20px;
 text-align: center;
 color: #eee;
 font-family:黑體;
 font-size: 14px;
}
<div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
</div>

然后在musicBox對象中添加一個獲取歌曲信息的方法：

/*獲取當前歌曲的信息*/
getCurrentSong : function(){
 var info = this.songs[this.index];
 info = info.split('/')[1];
 info = info.split('.')[0];
 return '正在播放：' +　info;
}

然后，在按鈕的點擊事件中，只需要加上下面的代碼，即可獲取實時的歌曲信息啦！

先獲取信息欄：

/* 獲取歌曲的信息欄 */
var infoDom = utils.dom('#info');

改寫按鈕點擊的事件：

infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//顯示當前的歌曲信息

效果：

這一節到此告一段落了，下一節，我們來做音軌。

悠閑的午后，品著剛泡好的茶

聽著美妙的音樂，也是一種享受吧。

享受編程的樂趣，懷著感恩的心去體會每一天生活中的細節。