vue实现的网易云音乐在线播放和下载功能案例
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
本文实例讲述了vue实现的网易云音乐在线播放和下载功能。分享给大家供大家参考,具体如下:
效果如图:
完整代码:
<!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> <style lang=""> html, body { height: 100%; padding: 0; margin: 0; } #app { height: 100%; display: flex; } #app>#left { flex: 1; background-color: skyblue; text-align: center; /* 超出滚动 */ overflow: scroll; } #app>#right { flex: 1; background-color: orange; } ul { list-style: none; padding: 0; } input { width: 469px; height: 56px; margin: 10px auto; border-radius: 10px; outline: none; font-size: 24px; border: 0; padding-left: 15px; } #left li { width: 451px; /* height: 35px; */ margin: 0 auto; font-weight: 700; border: 2px solid black; line-height: 35px; color: white; background-color: cadetblue; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; max-height: 35px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #left li:hover { cursor: pointer; background-color: greenyellow; color: red; } #right { position: relative; overflow: scroll; } audio { /* position: absolute; left: 50%; transform: translateX(-50%) translateY(46px); */ display: block; margin: 0 auto; } /* li标签过渡的样式 */ .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to{ opacity: 0; transform: translateX(100px); } /* 设置专辑图片样式 */ .cover{ width: 260px; height: 260px; border-radius: 50%; display: block; margin: 10px auto; /* transform: translateX(-50%) translateY(10px); */ } /* 动画 */ @keyframes autoRotate{ to{ transform: rotateZ(360deg); } } /* 动画播放样式 */ .autoRotate{ /* 动画名,一直播放iteration(一直重复),匀速(timing),时间2s(duration),状态(running) */ animation-name:autoRotate; animation-iteration-count:infinite; animation-timing-function: linear; animation-duration:2s; animation-play-state:running; } /* 动画状态 */ .pause{ animation-play-state:paused; } /* 评论 */ .comment{ height: 150px; /* background-color: skyblue; */ } .comment li{ display: flex; padding: 5px; } .comment li .left{ width: 120px; height: 120px; } .comment li .left img{ width: 100px; } .comment li a{ text-decoration: none; font-weight: bold; color: crimson; } </style> </head> <body> <div id="app"> <!-- 左边 --> <div id="left"> <input type="text" value="请输入你要搜索的歌名" v-model="inputValue" @keyup.enter="search"> <!-- 给li添加过渡 ;v-on:after-enter="afterEnter":钩子函数--> <transition-group name="list" tag="ul" v-on:after-enter="afterEnter"> <!-- play(item.id):把id传过去 --> <li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index*100+'ms'}" > {{item.name}}-----演唱者:{{item.artists[0].name}} </li> </transition-group> </div> <!-- 右边,播放 --> <div id="right"> <!-- 专辑页面 --> <img :src="/UploadFiles/2021-04-02/picUrl">https://github.com/huanggengzhong/NeteaseCloudMusicApi,重新下载开启服务器即可希望本文所述对大家vue.js程序设计有所帮助。
下一篇:vue实现的微信机器人聊天功能案例【附源码下载】