用jQuery实现qq音乐播放器
生活随笔
收集整理的這篇文章主要介紹了
用jQuery实现qq音乐播放器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
折騰了很久，最終還是決定先放棄，繼續(xù)學習jQuery后面的內(nèi)容，做了有一大半吧，核心功能不想搞了，以后有時間再繼續(xù)吧
貼代碼：
html：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"><link rel="stylesheet" href="style.css"><script src="../jquery/jquery-3.4.1.min.js"></script><script src="jquery.mCustomScrollbar.concat.min.js"></script><script src="player.js"></script><script src="index.js"></script> </head><body><div class="header"><h1 class="logo"><a href=""></a></h1><ul class="register"><li>登錄</li><li>設置</li></ul></div><div class="content"><!-- 和foter_in一樣是版心 居中--><div class="content_in"><div class="content_left"><!-- 工具欄 --><div class="content_toolbar"><span><i></i>收藏</span><span><i></i>添加到</span><span><i></i>下載</span><span><i></i>刪除</span><span><i></i>清空列表</span></div><!-- 歌曲列表：和工具欄分開裝進div里面，這樣歌曲列表滾動就不會影響工具欄 --><div class="content_list" data-mcs-theme="minimal-dark"><ul><li class="title"><div class="list_check"><i></i></div><div class="list_number"></div><div class="list_name">歌曲</div><div class="list_singer">歌手</div><div class="list_time">時長</div></li></ul></div></div><div class="content_right"><div class="song_info"><a href="javascript:;" class="song_info_pic"><img src="imgQQ/jay.jpg" alt=""></a><div class="song_info_name">歌曲名稱：<a href="javascript:;">告白氣球</a></div><div class="song_info_singer">歌手名：<a href="javascript:;">周杰倫</a></div><div class="song_info_ablum">專輯名：<a href="javascript:;">《周杰倫的床邊故事》</a></div></div><ul class="song_lyric"><li class="cur">第一條歌詞</li><li>第二條歌詞</li></ul></div></div></div><div class="footer"><div class="footer_in"><a href="javascript:;" class="music_pre"></a><a href="javascript:;" class="music_play"></a><a href="javascript:;" class="music_next"></a><div class="music_progress_info"><div class="music_progress_top"><span class="music_progress_name">告白氣球 / 周杰倫</span><span class="music_progress_time">00::00 / 03:35</span></div><div class="music_progress_bar"><div class="music_progress_line"><div class="music_progress_dot"></div></div></div></div><a href="javascript:;" class="music_mode"></a><a href="javascript:;" class="music_fav"></a><a href="javascript:;" class="music_down"></a><a href="javascript:;" class="music_comment"></a><a href="javascript:;" class="music_only"></a><div class="music_voice_info"><a href="javascript:;" class="music_voice_icon"></a><div class="music_voice_bar"><div class="music_voice_line"><div class="music_voice_dot"></div></div> </div></div></div></div></div><!-- 背景設置 --><div class="mask_bg"></div><!-- 設置一塊遮罩，這樣有背景圖文字也能顯示得更清楚 --><div class="mask"></div><audio src=""></audio> </body></html>css代碼：
* {margin: 0;padding: 0; }html, body {width: 100%;height: 100%;font-size: 14px; }.header {width: 100%;height: 45px;/* background:red; */}.content {width: 100%;height: 460px;/* background: rgb(66, 66, 62); */ }.content .content_in {width: 1200px;height: 100%;/* background-color: pink; */margin: 0 auto; }.header .logo {float: left;margin-left: 20px;}.header .logo a {display: inline-block;width: 78px;height: 21px;background: url("imgQQ/player_logo.png") no-repeat 0 0;opacity: 0.5; }.header .logo a:hover {opacity: 1; }.header .register {line-height: 45px;float: right; }.header .register li {list-style: none;float: left;margin-right: 20px;color: #fff;opacity: 0.5; }.header .register li:hover {opacity: 1; }.content_in .content_left {float: left;width: 800px;height: 100%;/* background-color: orange; */ }.content_in .content_right {float: right;width: 400px;height: 100%;/* background-color: rgb(196, 192, 255); */ }.content_right .song_info {text-align: center;color: rgba(255, 255, 255, 0.5);line-height: 30px; }.song_info div a {text-decoration: none;color: #fff;opacity: 0.5; }.song_info div a:hover {opacity: 1; }/*設置后面那塊版面*/ .song_info .song_info_pic {/*a不能直接設置寬高*/display: inline-block;background: url(imgQQ/album_cover_player.png) no-repeat 0 0;width: 201px;height: 180px;/*行內(nèi)內(nèi)容向左側(cè)邊對齊*/text-align: left; }.song_info_pic img {width: 180px;height: 180px; }.content_right .song_lyric {text-align: center;/* background: rosybrown; */margin-top: 50px; }.content_right .song_lyric li {list-style: none;line-height: 30px;font-weight: bold;color: rgba(255, 255, 255, 0.5); }.content_right .song_lyric .cur {color: #31c27c; }.content_left .content_toolbar {width: 100%;height: 40px;/* background-color: blue; */ }.content_left .content_list {width: 100%;height: 420px;/* background-color: purple; */overflow: auto; }.content_list li {list-style: none;width: 100%;height: 50px;/* background-color: orange; */border: 1px solid rgb(255, 255, 255, 0.5);box-sizing: border-box;/*禁止復制*/user-select: none;}.content_list li div {float: left;/*文字顏色*/color: rgba(255,255,255,0.5);line-height: 50px;/* opacity: 0.5; */ }.content_list .list_check {width: 50px;height: 100%;/* background:#000; */text-align: center;}.content_list .list_check i {display: inline-block;width: 14px;height: 14px;border: 1px solid #fff;opacity: 0.5;}.content_list .list_checked i {background: url("imgQQ/icon_sprite.png") no-repeat -60px -80px;opacity: 1; }.content_list .list_number {width: 20px;height: 100%;/* background: cornflowerblue; */ } .content_list .list_number2{/*序號隱藏 注意優(yōu)先級問題*/color: transparent !important;background: url('imgQQ/wave.gif') no-repeat 0 center; } .content_list .list_menu {margin-top: 5px;float: right;/*離歌手太近*/margin-right: 20px;display: none; }.list_menu a {display: inline-block;width: 36px;height: 36px;background: url("imgQQ/icon_list_menu.png") no-repeat 0 0;opacity: 0.5; } .list_menu a:hover{opacity: 1; }.list_menu a:nth-child(1) {background-position: -120px 0; }.list_menu a:nth-child(2) {background-position: -120px -80px; }.list_menu a:nth-child(3) {background-position: -120px -120px; }.list_menu a:nth-child(4) {background-position: -120px -40px; } .list_menu .list_menu_play2{background-position: -80px -200px !important;} .content_list .list_name {width: 50%;height: 100%;/* background:salmon; */ }.content_list .list_singer {width: 20%;height: 100%;/* background: slateblue; */ }.content_list .list_time a {display: inline-block;width: 36px;height: 36px;background: url("imgQQ/icon_list_menu.png") no-repeat -120px -160px;float: left;margin-top: 5px;display: none;opacity: 0.5;} .content_list .list_time a:hover{opacity:1; }.content_toolbar span {display: inline-block;width: 122px;height: 100%;line-height: 40px;text-align: center;border: 1px solid #fff;box-sizing: border-box;border-radius: 5px;opacity: 0.5;}.content_toolbar span:hover {opacity: 1; }.content_toolbar span i {display: inline-block;width: 18px;height: 18px;background: url('imgQQ/icon_sprite.png');margin-right: 10px;vertical-align: -5px;}.content_toolbar span:nth-child(1) i {background-position: -60px -20px; }.content_toolbar span:nth-child(2) i {background-position: -20px -20px; }.content_toolbar span:nth-child(3) i {background-position: -40px -240px; }.content_toolbar span:nth-child(4) i {background-position: -100px -20px; }.content_toolbar span:nth-child(5) i {background-position: -40px -300px; }.footer {width: 100%;height: 80px;/* background-color:blue; */position: absolute;left: 0;bottom: 0; }.footer .footer_in {width: 1200px;height: 100%;/* background-color: green; */margin: 0 auto; }.footer_in a {display: inline-block;text-decoration: none;color: #fff;background: url(imgQQ/player.png) no-repeat 0 0;margin-right: 20px; }.footer_in .music_pre {width: 19px;height: 20px;background-position: 0 -30px; }.footer_in .music_play {width: 21px;height: 29px;background-position: 0 0;vertical-align: -5px; }.footer_in .music_play2 {background-position: -30px 0; }.footer_in .music_next {width: 19px;height: 20px;background-position: 0 -52px; }.footer_in .music_progress_info {/*因為div是塊級元素，會頂開下面的元素到下一行*/display: inline-block;width: 670px;height: 40px;/* background:red; */position: relative;top: 10px; }.music_progress_info .music_progress_top {width: 100%;height: 30px;color: #fff;line-height: 30px;}.music_progress_top .music_progress_name {float: left;opacity: 0.5; }.music_progress_top .music_progress_name:hover {opacity: 1; }.music_progress_top .music_progress_time {float: right;opacity: 0.5; }.music_progress_info .music_progress_bar {width: 100%;height: 4px;background: rgba(255, 255, 255, 0.5);margin-top: 5px;position: relative; }.music_progress_bar .music_progress_line {width: 0px;height: 100%;background: #fff; }.music_progress_line .music_progress_dot {width: 14px;height: 14px;border-radius: 50%;background: #fff;position: absolute;top: -5px;left: 0px; }.footer_in .music_mode {width: 26px;height: 25px;background-position: 0 -205px; }.footer_in .music_mode2 {width: 23px;height: 20px;background-position: 0 -260px; }.footer_in .music_mode3 {width: 25px;height: 19px;background-position: 0 -74px; }.footer_in .music_mode4 {width: 26px;height: 25px;background-position: 0 -232px }.footer_in .music_fav {width: 24px;height: 21px;background-position: 0 -96px; }.footer_in .music_fav2 {background-position: -30px -96px; }.footer_in .music_down {width: 22px;height: 21px;background-position: 0 -120px; }.footer_in .music_comment {width: 24px;height: 24px;background-position: 0 -400px; }.footer_in .music_only {width: 74px;height: 27px;background-position: 0 -281px; }.footer_in .music_only2 {background-position: 0 -310px; }.footer_in .music_voice_info {display: inline-block;width: 100px;height: 40px;/* background:darkblue; */line-height: 40px;position: relative;top: 10px; }.music_voice_info .music_voice_icon {width: 26px;height: 21px;background-position: 0 -144px;position: absolute;left: 0;top: 10px;}.music_voice_info .music_voice_icon2 {background-position: 0 -182px; }.music_voice_info .music_voice_bar {width: 70px;height: 4px;background: rgba(255, 255, 255, 0.5);position: absolute;right: 0;top: 18px; }.music_voice_bar .music_voice_line {width: 70px;height: 100%;background: #fff; }.music_voice_line .music_voice_dot {width: 14px;height: 14px;border-radius: 50%;background: #fff;position: relative;top: -5px;left: 70px; }/*背景*/ .mask_bg {width: 100%;height: 100%;position: absolute;left: 0;top: 0;/*因為這個背景div在其他div后面，會覆蓋前面的，要想將他設置為背景圖，得設置下優(yōu)先級*/z-index: -2;background: url(imgQQ/jay.jpg) no-repeat 0 0;background: cover;/*高斯模糊背景*/filter: blur(100px); }.mask{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;background: rgba(0 ,0, 0 ,0.35); }._mCS_1 .mCSB_dragger .mCSB_dragger_bar {width: 8px; }index.js代碼
$(function () {//自定義滾動條$(".content_list").mCustomScrollbar();var $audio=$('audio');//加載歌曲列表getPlayerList();function getPlayerList() {$.ajax({//從哪加載url: "./source/musiclist.json",// 加載的是什么類型dataType: "json",// 成功之后做什么success: function (data) {// 3.1遍歷獲取到的數(shù)據(jù), 創(chuàng)建每一條音樂var $musicList = $(".content_list ul");$.each(data, function (index, ele) {var $item = crateMusicItem(index, ele);$musicList.append($item);});// initMusicInfo(data[0]);// initMusicLyric(data[0]);},//失敗之后做什么error: function (e) {console.log(e);}})}//初始化事件監(jiān)聽initEvents();function initEvents() {//監(jiān)聽歌曲的移入移出事件//要用事件委托因為歌曲都是新增的$('.content_list').delegate(".list_music", "mouseenter", function () {//find 搜索所有與指定表達式相匹配的元素，這個函數(shù)是找出正在處理的元素的后代元素的好方法//如果直接用$('.list_menu')所有菜單會一起顯示出來//顯示子菜單$(this).find('.list_menu').stop().fadeIn(100);$(this).find('.list_time a').stop().fadeIn(100);//隱藏時長$(this).find('.list_time span').stop().fadeOut(100);})$('.content_list').delegate(".list_music", "mouseleave", function () {//隱藏子菜單$(this).find('.list_menu').stop().fadeOut(100);$(this).find('.list_time a').stop().fadeOut(100);//顯示時長$(this).find('.list_time span').stop().fadeIn(100);})//監(jiān)聽歌曲的移入移出事件//要用事件委托因為歌曲都是新增的$('.content_list').delegate(".list_music", "mouseenter", function () {//find 搜索所有與指定表達式相匹配的元素，這個函數(shù)是找出正在處理的元素的后代元素的好方法//如果直接用$('.list_menu')所有菜單會一起顯示出來//顯示子菜單$(this).find('.list_menu').stop().fadeIn(100);$(this).find('.list_time a').stop().fadeIn(100);//隱藏時長$(this).find('.list_time span').stop().fadeOut(100);})$('.content_list').delegate(".list_music", "mouseleave", function () {//隱藏子菜單$(this).find('.list_menu').stop().fadeOut(100);$(this).find('.list_time a').stop().fadeOut(100);//顯示時長$(this).find('.list_time span').stop().fadeIn(100);})//監(jiān)聽復選框的點擊事件$('.content_list').delegate('.list_check', 'click', function () {$(this).toggleClass('list_checked'); //有就刪除，沒有就添加})//監(jiān)聽播放按鈕的點擊事件var $musicPlay = $('.music_play');$('.content_list').delegate('.list_menu_play', 'click', function () {var $item = $(this).parents('.list_music');// console.log($item.get(0).index);//切換播放圖標$(this).toggleClass('list_menu_play2');//復原其他播放圖標//先找點擊的祖先list_music,再用siblings()方法找list_music的兄弟，$item.siblings().find('.list_menu_play').removeClass('list_menu_play2');//同步底部播放按鈕if ($(this).attr('class').indexOf('list_menu_play2') != -1) {//能找到list_menu_play2//當前子菜單的播放按鈕是播放狀態(tài)$musicPlay.addClass('music_play2');//讓文字高亮$item.find('div').css('color', '#fff'); //找到點擊的父親list_music，找到其中的div$item.siblings().find('div').css('color', ' rgba(255,255,255,0.5)');} else {//當前子菜單的播放按鈕不是播放狀態(tài)$musicPlay.removeClass('music_play2');//讓文字不高亮$item.find('div').css('color', " rgba(255,255,255,0.5)");}//切換序號的狀態(tài) 將序號變成播放的動態(tài)圖，記得要在css的list_number2處加優(yōu)先級$item.find('.list_number').toggleClass('list_number2');$item.siblings().find('.list_number').removeClass('list_number2');//播放音樂player.playMusic($item.get(0).index, $item.get(0).music);})}// 定義一個方法創(chuàng)建一條音樂function crateMusicItem(index, music) {/*斜杠是轉(zhuǎn)義符，div外層有引號了*/var $item = $("" +"<li class=\"list_music\">\n" +"<div class=\"list_check\"><i></i></div>\n" +"<div class=\"list_number\">" + (index + 1) + "</div>\n" +"<div class=\"list_name\">" + music.name + "" +" <div class=\"list_menu\">\n" +" <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" +" <a href=\"javascript:;\" title=\"添加\"></a>\n" +" <a href=\"javascript:;\" title=\"下載\"></a>\n" +" <a href=\"javascript:;\" title=\"分享\"></a>\n" +" </div>\n" +"</div>\n" +"<div class=\"list_singer\">" + music.singer + "</div>\n" +"<div class=\"list_time\">\n" +" <span>" + music.time + "</span>\n" +" <a href=\"javascript:;\" title=\"刪除\" class='list_menu_del'></a>\n" +"</div>\n" +"</li>");$item.get(0).index = index;$item.get(0).music = music;return $item;} })play.js代碼
$(function () {//自定義滾動條$(".content_list").mCustomScrollbar();var $audio=$('audio');//加載歌曲列表getPlayerList();function getPlayerList() {$.ajax({//從哪加載url: "./source/musiclist.json",// 加載的是什么類型dataType: "json",// 成功之后做什么success: function (data) {// 3.1遍歷獲取到的數(shù)據(jù), 創(chuàng)建每一條音樂var $musicList = $(".content_list ul");$.each(data, function (index, ele) {var $item = crateMusicItem(index, ele);$musicList.append($item);});// initMusicInfo(data[0]);// initMusicLyric(data[0]);},//失敗之后做什么error: function (e) {console.log(e);}})}//初始化事件監(jiān)聽initEvents();function initEvents() {//監(jiān)聽歌曲的移入移出事件//要用事件委托因為歌曲都是新增的$('.content_list').delegate(".list_music", "mouseenter", function () {//find 搜索所有與指定表達式相匹配的元素，這個函數(shù)是找出正在處理的元素的后代元素的好方法//如果直接用$('.list_menu')所有菜單會一起顯示出來//顯示子菜單$(this).find('.list_menu').stop().fadeIn(100);$(this).find('.list_time a').stop().fadeIn(100);//隱藏時長$(this).find('.list_time span').stop().fadeOut(100);})$('.content_list').delegate(".list_music", "mouseleave", function () {//隱藏子菜單$(this).find('.list_menu').stop().fadeOut(100);$(this).find('.list_time a').stop().fadeOut(100);//顯示時長$(this).find('.list_time span').stop().fadeIn(100);})//監(jiān)聽歌曲的移入移出事件//要用事件委托因為歌曲都是新增的$('.content_list').delegate(".list_music", "mouseenter", function () {//find 搜索所有與指定表達式相匹配的元素，這個函數(shù)是找出正在處理的元素的后代元素的好方法//如果直接用$('.list_menu')所有菜單會一起顯示出來//顯示子菜單$(this).find('.list_menu').stop().fadeIn(100);$(this).find('.list_time a').stop().fadeIn(100);//隱藏時長$(this).find('.list_time span').stop().fadeOut(100);})$('.content_list').delegate(".list_music", "mouseleave", function () {//隱藏子菜單$(this).find('.list_menu').stop().fadeOut(100);$(this).find('.list_time a').stop().fadeOut(100);//顯示時長$(this).find('.list_time span').stop().fadeIn(100);})//監(jiān)聽復選框的點擊事件$('.content_list').delegate('.list_check', 'click', function () {$(this).toggleClass('list_checked'); //有就刪除，沒有就添加})//監(jiān)聽播放按鈕的點擊事件var $musicPlay = $('.music_play');$('.content_list').delegate('.list_menu_play', 'click', function () {var $item = $(this).parents('.list_music');// console.log($item.get(0).index);//切換播放圖標$(this).toggleClass('list_menu_play2');//復原其他播放圖標//先找點擊的祖先list_music,再用siblings()方法找list_music的兄弟，$item.siblings().find('.list_menu_play').removeClass('list_menu_play2');//同步底部播放按鈕if ($(this).attr('class').indexOf('list_menu_play2') != -1) {//能找到list_menu_play2//當前子菜單的播放按鈕是播放狀態(tài)$musicPlay.addClass('music_play2');//讓文字高亮$item.find('div').css('color', '#fff'); //找到點擊的父親list_music，找到其中的div$item.siblings().find('div').css('color', ' rgba(255,255,255,0.5)');} else {//當前子菜單的播放按鈕不是播放狀態(tài)$musicPlay.removeClass('music_play2');//讓文字不高亮$item.find('div').css('color', " rgba(255,255,255,0.5)");}//切換序號的狀態(tài) 將序號變成播放的動態(tài)圖，記得要在css的list_number2處加優(yōu)先級$item.find('.list_number').toggleClass('list_number2');$item.siblings().find('.list_number').removeClass('list_number2');//播放音樂player.playMusic($item.get(0).index, $item.get(0).music);})}// 定義一個方法創(chuàng)建一條音樂function crateMusicItem(index, music) {/*斜杠是轉(zhuǎn)義符，div外層有引號了*/var $item = $("" +"<li class=\"list_music\">\n" +"<div class=\"list_check\"><i></i></div>\n" +"<div class=\"list_number\">" + (index + 1) + "</div>\n" +"<div class=\"list_name\">" + music.name + "" +" <div class=\"list_menu\">\n" +" <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" +" <a href=\"javascript:;\" title=\"添加\"></a>\n" +" <a href=\"javascript:;\" title=\"下載\"></a>\n" +" <a href=\"javascript:;\" title=\"分享\"></a>\n" +" </div>\n" +"</div>\n" +"<div class=\"list_singer\">" + music.singer + "</div>\n" +"<div class=\"list_time\">\n" +" <span>" + music.time + "</span>\n" +" <a href=\"javascript:;\" title=\"刪除\" class='list_menu_del'></a>\n" +"</div>\n" +"</li>");$item.get(0).index = index;$item.get(0).music = music;return $item;} })?
?
?
總結(jié)
以上是生活随笔為你收集整理的用jQuery实现qq音乐播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python安装出错0x80072ee7
- 下一篇： 元宇宙爆火，虚拟人的商业落地现实又残酷