jq+html+css 实现简易版网易云音乐

项目访问

升级版对应文章

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>云音乐</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/icon.css"><body><div id="index"><div id="header"><div class="container"><div class="nav"><span class="active">推荐</span> <span>歌手</span><span>MV</span></div></div> </div><div id="swiper"><div class="container"><div class="wrapper"><div class="swiper_wrapper"></div><div class="point"><span class="active"></span><span></span><span></span><span></span></div></div></div></div><div id="content"><div class="container"><div class="rcmd_title title" >推荐歌曲<i class="iconfont icon-gengxin icon update"  data-index="1"></i></div><div class="rcmd"></div><div class="new_title title">热门歌单</div><div class="new"></div><div class="loco_title title">独家放送</div><div class="loco"></div></div></div><div id="footer">这是底部条</div></div><script src="./js/jquery-3.6.0.min.js"></script><script src="./js/require.js"></script><script src="./js/index.js"></script><script src="./js/swiper.js"></script></body>
</html>

icon.css

@font-face {font-family: "iconfont"; /* Project id 2808749 */src: url('//at.alicdn.com/t/font_2808749_y0rm2ogva2r.woff2?t=1631512710089') format('woff2'),url('//at.alicdn.com/t/font_2808749_y0rm2ogva2r.woff?t=1631512710089') format('woff'),url('//at.alicdn.com/t/font_2808749_y0rm2ogva2r.ttf?t=1631512710089') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-gengxin:before {content: "\e645";
}.icon-bofang:before {content: "\e61f";
}

index.css

.container {position: relative;width: 1000px;margin: 0 auto;
}
span {display: inline-block !important;
}
#index #header {min-width: min-content;position: sticky;top: 0;z-index: 999;height: 40px;line-height: 40px;background-color: #000;color: #fff;
}
#index #header .nav {display: flex;
}
#index #header .nav span {padding: 0px 12px;cursor: pointer;
}
#index #header .nav .active {color: #b70a0a;
}
#index #swiper {background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
#index #swiper .container .wrapper {position: relative;width: 1000px;height: 284px;margin: 0 auto;overflow: hidden;
}
#index #swiper .container .wrapper .swiper_wrapper {position: absolute;width: 5000px;display: flex;
}
#index #swiper .container .wrapper .swiper_wrapper img {width: 1000px;height: 284px;
}
#index #swiper .container .wrapper .point {position: absolute;width: 100px;height: 30px;z-index: 999;display: flex;justify-content: space-between;bottom: 10px;left: 50%;margin-left: -50px;
}
#index #swiper .container .wrapper .point span {width: 15px;height: 15px;border-radius: 50%;background-color: #ccc;font-size: 0px;
}
#index #swiper .container .wrapper .point .active {background-color: #b70a0a;
}
#index #content {background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
#index #content .container {background-color: #fff;
}
#index #content .container .title {position: relative;width: 100%;height: 40px;line-height: 40px;padding-left: 16px;padding-bottom: 20px;border-bottom: 4px solid #b70a0a;
}
#index #content .container .title i {position: absolute;left: 90px;
}
#index #content .container .title i:hover {color: #b70a0a;
}
#index #content .container .rcmd {padding-top: 10px;display: flex;justify-content: space-around;flex-wrap: wrap;
}
#index #content .container .rcmd .item {position: relative;width: 168px;height: 180px;margin-bottom: 12px;
}
#index #content .container .rcmd .item a {display: block;height: 140px;
}
#index #content .container .rcmd .item a img {width: 100%;height: 140px;
}
#index #content .container .rcmd .item a .name {font-size: 12px;line-height: 16px;padding: 6px 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/*弹性伸缩盒子模型显示*/-webkit-line-clamp: 2;/*限制在一个块级元素显示的文本行数*/-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}
#index #content .container .rcmd .item a .name:hover {color: #b70a0a;
}
#index #content .container .rcmd .item a .count {position: absolute;bottom: 40px;height: 30px;background-color: rgba(0, 0, 0, 0.4);width: 168px;font-size: 12px;color: #fff;line-height: 30px;padding-left: 10px;
}
#index #content .container .rcmd .item a .count .icon {position: absolute;right: 3px;
}
#index #content .container .rcmd .item a .count .icon:hover {color: #b70a0a;
}
#index #content .container .new {padding: 10px 14px;display: flex;justify-content: space-between;flex-wrap: wrap;
}
#index #content .container .new .item {width: 440px;height: 60px;position: relative;margin-right: 10px;margin-bottom: 10px;
}
#index #content .container .new .item .new_img {width: 60px;height: 60px;
}
#index #content .container .new .item .name {position: absolute;top: 11px;left: 67px;font-size: 14px;cursor: pointer;
}
#index #content .container .new .item .name:hover {color: #b70a0a;
}
#index #content .container .new .item .count {position: absolute;top: 40px;left: 67px;font-size: 10px;cursor: pointer;
}
#index #content .container .loco {padding: 20px 10px 0px 10px;display: flex;
}
#index #content .container .loco .item {flex: 1;margin-right: 10px;
}
#index #content .container .loco .item:last-child {margin-right: 0px;
}
#index #content .container .loco .item img {width: 100%;height: 112px;
}
#index #content .container .loco .item .name {font-size: 14px;line-height: 20px;color: #ccc;padding: 10px 6px;cursor: pointer;
}
#index #content .container .loco .item .name:hover {color: #b70a0a;
}
#index #footer {background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);height: 120px;text-align: center;line-height: 120px;font-size: 30px;
}

reset.css

/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;font-weight: normal;vertical-align: baseline;box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display: block;
}
ol, ul, li{list-style: none;
}
blockquote, q{quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{content: '';content: none;
}
table{border-collapse: collapse;border-spacing: 0;
}/* custom */
a{color: #7e8c8d;text-decoration: none;-webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{width: 5px;height: 5px;
}
::-webkit-scrollbar-track-piece{background-color: rgba(0, 0, 0, 0.2);-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{width: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}
html, body{width: 100%;font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{line-height: 1;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{overflow-y: scroll;
}/*清除浮动*/
.clearfix:before,
.clearfix:after{content: " ";display: inline-block;height: 0;clear: both;visibility: hidden;
}
.clearfix{*zoom: 1;
}/*隐藏*/
.dn{display: none;
}

require.js

var BASE_URL = 'https://cloud-music-api-sandy.vercel.app'
// 轮播图
function swiper_render(data) {// 四张轮播图var count = 4;var str ="";for(var i = 0; i < count; i++) {str += `<img src="${data[i].imageUrl}">`}str += `<img src="${data[0].imageUrl}">`$(".swiper_wrapper").html("").append(str)
}
function swiper() {$.ajax({url: BASE_URL+"/banner",type: "get",success: function(res) {swiper_render(res.banners)},error: function(error) {console.log(error)}})
}// 推荐歌单
function rcmd_render(data) {var str = "";data.forEach(e => {str += `<div class='item' data-id=${e.id}><a href=''><img src=${e.coverImgUrl}><p class='name'>${e.name}</p><div class='count'>播放量：${e.playCount}<i class='iconfont icon-bofang icon'></i></div></a></div>`});$(".rcmd").html("").append(str)
}
function rcmd(offset) {$.ajax({url: BASE_URL+"/top/playlist",type: "get",data: {limit: 10,offset: offset,},success: function (res) {rcmd_render(res.playlists)},error: function (error) {console.log(error)}})
}// 热门歌单
function hot_render(data) {var str =""data.forEach(e => {str += `<div class='item'><img src='${e.picUrl}' class='new_img'/><div class='name' data-id=${e.id}>${e.name}</div><div class='count'>播放量：${e.playCount}</div></div>`})$(".new").html("").append(str)
}
function hot_song(){$.ajax({url: BASE_URL+"/personalized",type: "get",data: {limit:10},success: function(res) {hot_render(res.result)},error:function(error) {console.log(error)}})
}// 独家放送
function loco_render(data) {console.log(data)var str = "";data.forEach(e => {str += `<div class='item'><img src ='${e.picUrl}'/><p class='name' data-id=${e.id}>${e.name}</p></div>`})console.log(str)$(".loco").html("").append(str);
}
function loco() {$.ajax({url: BASE_URL + "/personalized/privatecontent",type: "get",success: function(res) {loco_render(res.result);},error: function(error) {console.log(error);} })
}

swiper.js

(function () {var $img = $(".swiper_wrapper")var $point = $(".point")var len = $img.children().length;var num = $point.children().length;var timerId;var index = 0;var small_index = 0;var autoplay = function () {index++;if (index > len - 1) {index = 1;$img.css({ left: 0 });}$img.animate({ left: -(index * 1000) }, 500);small_index++;if (small_index > num - 1) {small_index = 0}$point.children().eq(small_index).addClass("active").siblings().removeClass("active");}timerId = setInterval(function () {autoplay()}, 1500);$(".wrapper").on("mouseenter", function () {clearInterval(timerId)})$(".wrapper").on("mouseleave", function () {timerId = setInterval(function () {autoplay()}, 1500)})$(".point").on("click", "span", function() {console.log(123)var i = $(this).index();console.log(i)index = i;small_index =i;$img.animate({ left: -(index * 1000) }, 500);$point.children().eq(small_index).addClass("active").siblings().removeClass("active");})
})()

index.js

$(function () {// 当前推荐的var rcmd_offset = 0;// 初始化rcmd(rcmd_offset);swiper();hot_song();loco();$('.update').on("click", function (e) {var index = e.target.dataset.indexif (index == 1) {rcmd_offset++;rcmd(rcmd_offset * 10);}})
})

jq+html+css 实现简易版网易云音乐相关推荐

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路...
Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...
树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
关于 Linux 版网易云音乐音高畸变的问题解决
问题描述: Linux 版本的网易云音乐最后更新于 2019 年,对于今天来说,其中的许多库文件已经有些过时了.我在使用 Linux 版网易云音乐时,在暂停之后继续播放音乐,经常能感受到歌曲整体音调出 ...
python刷网易云_牛逼了！用Python开发的命令行版网易云音乐，Github获8300颗星！...
大家好,我是程序员G哥最近在逛Github发现了一个非常有趣的库musicbox,是用纯Python打造的,收获了8300颗星.Python语言简单易学,好玩有趣,身边越来越多的小伙伴都开始学习Py ...
由 UWP 版网易云音乐闪退引发的博文
今天,不知怎么的.网易云音乐出现了一打开就闪退的情况.百度了好些时候未果,就直接 Windows + i 打开 Windows 设置 > 应用在应用和功能列表中找到网易云音乐,在展开的高级选 ...
用Compose实现轻量版网易云音乐
简述这是一个几乎全部使用Compose实现UI各组成部分的纯Kotlin Android App,应用取名Compose Many是因为最初想实现集各种小功能的工具软件,当然主要还是想也借此来学习C ...
01、Vue简易版网易云——项目简介
1.项目介绍在经过一段时间Vue的学习之后,本人决定用一个简易版的网易云项目,对Vue的知识进行进一步的巩固. 项目完整github地址 2.项目技术 1.后台技术本次后台使用的是,别人写好的网络 ...
基于Django3.0的Python版网易云音乐API
文章目录项目地址文档测试链接关于新增支持直接用js引用api 支持简易的日志记录安装运行接口调用须知目录项目地址 https://github.com/Kevin0z0/Pyth ...

jq+html+css 实现简易版网易云音乐

jq+html+css 实现简易版网易云音乐相关推荐

最新文章

热门文章