整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS3旋轉(zhuǎn)圖標(biāo)特效，常用在企業(yè)網(wǎng)站展示欄中，會(huì)應(yīng)用到不同的特效來(lái)展現(xiàn)頁(yè)面的用戶體驗(yàn)效果！
如下圖：鼠標(biāo)移上去后會(huì)出現(xiàn)圖標(biāo)旋轉(zhuǎn)背景色變幻效果
實(shí)現(xiàn)代碼
html結(jié)構(gòu)：
css樣式：
至于圖標(biāo)大家可以用自己平時(shí)積累的或者需求設(shè)計(jì)稿里面的，這里只是演示，不一定是跟你的需求圖標(biāo)一樣的哈！
js代碼：
節(jié)實(shí)現(xiàn)了：
下一節(jié)計(jì)劃：
小demo已經(jīng)寫好，不用擔(dān)心跳票啥的。
繼續(xù)上一節(jié)的內(nèi)容，我們?cè)诶L制好播放器的雛形之后，就可以考慮將一些工具性質(zhì)的方法封裝起來(lái)了，比如，我們多次用到dom和_center方法，不如將它們歸為一類，做為一個(gè)工具包來(lái)調(diào)用。
上代碼：
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);
},
}
然后我們就可以這樣調(diào)用了：
var musicDom = utils.dom('#music');
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom);
utils._center(musicIcon);
util是工具的意思，這樣是不是清晰多了呢？
然后進(jìn)行js打包：
引入：
<script type="text/javascript" src="js/util.js"></script>
用閉包的形式將util包裹起來(lái)，再掛在window對(duì)象下面，以防止命名重復(fù)。一個(gè)簡(jiǎn)單的工具包就這樣做好啦！
;(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);
同時(shí)，我們把css也單獨(dú)整出去，不要放在頁(yè)面里，那樣會(huì)顯得頁(yè)面特別龐大，頁(yè)面應(yīng)該整潔和精簡(jiǎn)。當(dāng)一個(gè)模子畫出來(lái)之后，我一般都會(huì)將css整出去。
.music {
width: 200px;
height:300px;
background:#333;
border-radius: 5px;
box-shadow: 3px -3px 1px #666;
position: relative; /*center方法已經(jīng)將position設(shè)置為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"/>
這樣一來(lái)，頁(yè)面就簡(jiǎn)潔多了！
接下來(lái)，讓我們愉快地開發(fā)功能吧！
1. 開始和暫停按鈕之間的切換
/* 獲取開始按鈕 */
var playDom = utils.dom('#play');
然后，給它綁定一個(gè)點(diǎn)擊事件
playDom.onclick = function(){
alert('play');
}
這說(shuō)明綁定事件成功了。
將暫停按鈕加上去，默認(rèn)是隱藏的。
上一節(jié)中出現(xiàn)了圖標(biāo)編碼格式?jīng)_突的問(wèn)題，因此我把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';
}
效果（截屏效果一般，漸變色沒(méi)顯示，大伙先將就著看吧）：
2. 音樂(lè)播放和暫停
還記得上一節(jié)封裝的musicBox對(duì)象嗎？
播放和暫停的核心方法是這樣的：
play : function(index){
this.musicDom.src = this.songs[index];
this.musicDom.play();
},
//暫停音樂(lè)
stop : function(){
this.musicDom.pause();
},
3. 代碼重構(gòu)和歌曲切換的實(shí)現(xiàn)
今天，我對(duì)musicBox進(jìn)行了一次簡(jiǎn)單的重構(gòu)，代碼如下：
var musicBox= {
musicDom : null, //播放器對(duì)象
songs : [], //歌曲目錄，用數(shù)組來(lái)存儲(chǔ)
index : 0, //當(dāng)前播放的歌曲索引
//初始化音樂(lè)盒
init : function(themeIndex){
this.musicDom = document.createElement('audio');
document.body.appendChild(this.musicDom);
},
//添加一首音樂(lè)
add : function(src){
this.songs.push(src);
},
//根據(jù)數(shù)組下標(biāo)決定播放哪一首歌
play : function(){
this.musicDom.src = this.songs[this.index];
this.musicDom.play();
},
//暫停音樂(lè)
stop : function(){
this.musicDom.pause();
},
//下一首
next : function(){
var len = this.songs.length;
//判斷是否是有效的索引
if((this.index + 1) >= 0 && this.index < len){
this.index ++;
//如果已經(jīng)是最后一首，就跳到第一首
if(this.index == len){
this.index = 0;
}
this.play();
}
},
//上一首
prev : function(){
var len = this.songs.length;
//判斷是否是有效的索引
if((this.index + 1) >= 0 && this.index < len){
//如果已經(jīng)是第一首，就跳到最后一首
if(this.index == 0){
this.index = len;
}
this.index --;
this.play();
}
}
}
不同點(diǎn)如下：
1.添加音樂(lè)索引index，取消了play方法的參數(shù)。
2.實(shí)現(xiàn)了上一首和下一首的邏輯代碼
3.默認(rèn)音樂(lè)為第一首
順便添加了幾首音樂(lè)。
現(xiàn)在我們就來(lái)調(diào)用看看吧，當(dāng)點(diǎn)擊播放按鈕的時(shí)候，就播放指定的歌曲。點(diǎn)擊暫停按鈕就停止播放。
4. 測(cè)試
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/班得瑞 - 雪之夢(mèng).mp3');
musicBox.add('mp3/超級(jí)好聽的龍貓輕音樂(lè).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';
//播放音樂(lè)
musicBox.play();
}
//暫停按鈕
pauseDom.onclick = function(){
this.style.display = 'none';
playDom.style.display = 'inline';
musicBox.stop();
}
//下一首
nextDom.onclick = function(){
musicBox.next();
//當(dāng)直接點(diǎn)擊下一首的時(shí)候，同時(shí)改變播放按鈕為暫停的樣式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
}
//上一首
prevDom.onclick = function(){
musicBox.prev();
//當(dāng)直接點(diǎn)擊下一首的時(shí)候，同時(shí)改變播放按鈕為暫停的樣式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
}
成功運(yùn)行起來(lái)了，雖然有聲音，但是還看不出屏幕的變化，所以，接下來(lái)，我們做一點(diǎn)有趣的事情。
5. 隨著歌曲的播放，讓音樂(lè)圖標(biāo)轉(zhuǎn)動(dòng)起來(lái)
關(guān)于這個(gè)，就需要用到css3的一個(gè)知識(shí)點(diǎn)了，就是關(guān)鍵幀。因?yàn)椴皇菍ｉT開貼講解css3，所以這邊我就簡(jiǎn)單說(shuō)明一下了。
像這樣：
@keyframes move{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
.r {
animation: move 1s linear infinite;
}
簡(jiǎn)單來(lái)說(shuō)，就是我們定義了一個(gè)名字叫r的class，動(dòng)畫效果采用名字叫move的關(guān)鍵幀。transform是轉(zhuǎn)換的意思，因?yàn)橛⑽脑~根trans就有從一個(gè)狀態(tài)變到另一個(gè)狀態(tài)的涵義，這是比較好理解的，而deg是角度的意思。
@keyframes move{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
用以上這段代碼，我們制作了一個(gè)關(guān)鍵幀動(dòng)畫，名字叫move，它將一個(gè)元素的位置從0度變化到360度，就是轉(zhuǎn)了一圈。
.r {
animation: move 1s linear infinite;
}
現(xiàn)在，我們給音樂(lè)圖標(biāo)加上轉(zhuǎn)動(dòng)樣式：
<i id='music-icon' class="iconfont icon-yinle r"></i>
在這里我去掉了該元素的定位方法，而繼續(xù)采用css的方式來(lái)居中。
.music .screen i {
color:#fff;
font-size: 88px;
position: absolute;
left: 50%;
top : 50%;
margin-left: -40px;
margin-top: -48px;
}
截圖原因，效果看起來(lái)不咋地，其實(shí)它的轉(zhuǎn)動(dòng)是非常平滑的，我也不清楚為啥截圖后變成了這個(gè)樣子。
終于轉(zhuǎn)起來(lái)了，核心的操作就是給圖標(biāo)添加一個(gè)css類而已。
現(xiàn)在，我們希望在點(diǎn)擊開始按鈕的時(shí)候，就轉(zhuǎn)動(dòng)圖標(biāo)。點(diǎn)擊暫停就移除轉(zhuǎn)動(dòng)的css類。
先給util工具包擴(kuò)展下面這幾個(gè)方法：
/*判斷dom元素是否擁有某個(gè)class類*/
hasClass : function(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
/*給dom元素增加某個(gè)class類*/
addClass : function(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
},
/*移除dom元素中的某個(gè)class類*/
removeClass : function(obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
/*該方法檢查每個(gè)元素中指定的類。如果不存在則添加類，如果已設(shè)置則刪除之。這就是所謂的切換效果。*/
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');
//播放音樂(lè)
musicBox.play();
}
//暫停按鈕
pauseDom.onclick = function(){
this.style.display = 'none';
playDom.style.display = 'inline';
utils.removeClass(musicIcon,'r');
musicBox.stop();
}
//下一首
nextDom.onclick = function(){
musicBox.next();
//當(dāng)直接點(diǎn)擊下一首的時(shí)候，同時(shí)改變播放按鈕為暫停的樣式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
utils.addClass(musicIcon,'r');
}
//上一首
prevDom.onclick = function(){
musicBox.prev();
//當(dāng)直接點(diǎn)擊下一首的時(shí)候，同時(shí)改變播放按鈕為暫停的樣式
playDom.style.display = 'none';
pauseDom.style.display = 'inline';
utils.addClass(musicIcon,'r');
}
效果：
7. 顯示正在播放的音樂(lè)
.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對(duì)象中添加一個(gè)獲取歌曲信息的方法：
/*獲取當(dāng)前歌曲的信息*/
getCurrentSong : function(){
var info = this.songs[this.index];
info = info.split('/')[1];
info = info.split('.')[0];
return '正在播放：' + info;
}
然后，在按鈕的點(diǎn)擊事件中，只需要加上下面的代碼，即可獲取實(shí)時(shí)的歌曲信息啦！
先獲取信息欄：
/* 獲取歌曲的信息欄 */
var infoDom = utils.dom('#info');
改寫按鈕點(diǎn)擊的事件：
infoDom.innerHTML = ''; //先清空上一次的信息 infoDom.innerHTML = musicBox.getCurrentSong();//顯示當(dāng)前的歌曲信息
效果：
這一節(jié)到此告一段落了，下一節(jié)，我們來(lái)做音軌。
悠閑的午后，品著剛泡好的茶
聽著美妙的音樂(lè)，也是一種享受吧。
享受編程的樂(lè)趣，懷著感恩的心去體會(huì)每一天生活中的細(xì)節(jié)。
轉(zhuǎn)地球功能實(shí)現(xiàn)主要借助于CSS動(dòng)畫效果完成，通過(guò)移動(dòng)地圖背景圖層，云彩圖層等，在視覺(jué)上呈現(xiàn)出旋轉(zhuǎn)地球效果。旋轉(zhuǎn)地球最終實(shí)現(xiàn)效果如下圖所示：
旋轉(zhuǎn)地球效果展示
旋轉(zhuǎn)地球效果實(shí)現(xiàn)主要借助于animation動(dòng)畫屬性完成，在動(dòng)畫關(guān)鍵之keyframe編寫時(shí)移動(dòng)圖片坐標(biāo)位置，實(shí)現(xiàn)背景地圖圖片位置移動(dòng)。為體現(xiàn)移動(dòng)效果，進(jìn)一步定義了云彩與飛機(jī)，飛機(jī)居中固定，云彩與地球非同步移動(dòng)，最終呈現(xiàn)出動(dòng)態(tài)效果。本例所需核心技術(shù)主要描述如下：
1、flex布局
通過(guò)使用flex布局模式用于實(shí)現(xiàn)呈現(xiàn)動(dòng)畫效果div在頁(yè)面居中顯示效果，核心代碼如下：
display: flex; //flex布局
justify-content: center;//水平居中
align-items: center;//垂直居中2、before與after偽元素
在之前案例設(shè)計(jì)分析中，我們使用before與after等元素進(jìn)行了案例設(shè)計(jì)，這兩個(gè)元素主要用于在頁(yè)面中生成虛擬的元素。本例中我們使用before在地球容器層前定義了用于存儲(chǔ)云彩的偽元素層。部分代碼如下：
.earth:before{
content: '';
width: 100%; //寬度
height: 100%; //高度
position: absolute; //絕對(duì)定位
background: url('cloud.png');//背景圖片
background-size: cover; //圖片放縮類型
opacity: 0.8; //透明度
border-radius: 50%; //圓角
animation:animate 18s linear infinite;//動(dòng)畫
}3、animation與keyframes
animation屬性與keyframes是實(shí)現(xiàn)CSS動(dòng)畫的關(guān)鍵，本例中需要將地球圖片與云彩圖片分別進(jìn)行動(dòng)畫定義，最終呈現(xiàn)動(dòng)畫效果，其中云彩動(dòng)畫定義如下：
animation:animate 18s linear infinite;//動(dòng)畫定義
@keyframes animate{ //關(guān)鍵幀定義
0%{ background-position: 0 0; }
100%{ background-position:807px 0; }
}在明確本例設(shè)計(jì)思路與掌握所需技能基礎(chǔ)上，我們可以搜集素材完成本案例效果的制作與實(shí)現(xiàn)。
1、所需素材
主要所需素材包括地圖平面圖片，飛機(jī)圖標(biāo)，云彩圖片等。素材如下圖所示：
圖片素材
2、頁(yè)面布局
本例頁(yè)面布局較為簡(jiǎn)單，只需要一個(gè)div用于存儲(chǔ)地圖圖片資源，before元素用于存儲(chǔ)云朵，飛機(jī)素材可用img標(biāo)記元素存儲(chǔ)。頁(yè)面body部分布局代碼如下：
<body>
<div class="earth">
<img src="plane.png">
</div>
</body>3、CSS樣式編輯
CSS樣式編輯是本例核心，包括頁(yè)面布局的實(shí)現(xiàn)，偽元素的定義及動(dòng)畫效果設(shè)計(jì)實(shí)現(xiàn)等，其中earth類、earth:before類與動(dòng)畫設(shè)計(jì)時(shí)關(guān)鍵部分，核心代碼如下：
核心CSS定義
以上給出旋轉(zhuǎn)地球設(shè)計(jì)效果實(shí)現(xiàn)思路及核心相關(guān)技術(shù)，如需代碼分享，請(qǐng)?jiān)u論區(qū)留言、關(guān)注并私信。本頭條號(hào)長(zhǎng)期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見，可在評(píng)論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
