《霍云龙歌曲选听》(跟着小辣椒学习黑黑老师的代码)
本帖最后由 亦是金 于 2024-2-9 19:36 编辑 <br /><br /><style>#mydiv { margin: 100px 0 0 calc(50% - 781px); width: 1400px; height: 780px; border: 7px solid rgba(0,204,255,.95); border-radius: 30px; background: gray url('https://z4a.net/images/2024/01/06/20240106b.gif') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center; }
#mydiv::before { position: absolute; content: attr(data-title); left: 42%;top: 87%; font: bold 2em/2.2em sans-serif; color: snow; text-shadow: 1px 1px #000; }
#rili { padding: 6px; top: 10px;left: 680px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(0,0,0,.25); display: grid; place-items: center; font: bold 2em sans-serif; }
#iRed { position: absolute; color: red; transition: .5s; }
#iRed:hover { font-size: 40px; font-weight: bold; }
#myplayer { position: absolute; width: 80px; height: 80px; right: 600px; bottom: 100px; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
.tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; cursor: pointer; z-index: 10; }
.tbox:hover { color: pink; }
.tbox:active { color: navy; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=109785" autoplay loop></audio>
<div id="rili"></div>
<img id="myplayer" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniubs01d.gif" alt="" />
</div>
<script>
/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["《我的小情人》 - 霍云龙","310710855"],["《不问青春多少年》 - 霍云龙","305805031"], ["《来个小鸡炖蘑菇》 - 孟宪平/霍云龙","270655755"], ["《 穷 欢 乐 》 - 霍云龙","299087466"], ["《轻松行走在人间》 - 霍云龙","270267303"], ["《 半 仙 说 》 - 霍云龙","278500782"],["《谁还不是个仙》 - 霍云龙","292947213"], ["《拱了白菜的猪》 - 霍云龙","258241005"], ["《月老儿说》 - 霍云龙","307305237"], ["《老妹你瞅啥》 - 霍云龙","1998984209"], ["《烈烈男人酒》 - 霍云龙","2059498722"], ["《嘿 宝贝》 - 玄艺/霍云龙","206601068"], ["《人间就是江湖》 - 霍云龙","323922765"], ["《耍酒疯儿》 - 霍云龙&玄艺","63743194"], ["《钱好花钱难赚》 - 霍云龙","270386780"], ["《饮酒消愁》 - 霍云龙","250682523"], ["《吹牛累不累》 - 霍云龙","291150356"], ["《你要啥我给啥》 - 霍云龙","261587764"], ["《墙头草》 - 霍云龙","252129466"], ["《有钱别忘本》 - 霍云龙","285188830"], ["《我不是酒神》 - 霍云龙","217695130"], ["《偷偷洒泪滴》 - 霍云龙/石晓峰","272772249"], ["《你说花开来看我》 - 霍云龙","268341923"], ["《人间处处有套路》 - 霍云龙","254482766"], ["《求神求仙》 - 霍云龙","301813711"], ["《我的心情你不懂》 - 霍云龙","252491694"], ["《我想挣大钱》 - 霍云龙","276102877"], ["《世间悲欢》 - 霍云龙","256861319"], ["《给亲爱的老婆》 - 霍云龙","46853486"], ["《爱你那么痛》 - 霍云龙","299044035"], ["《嘴儿》 - 霍云龙/玄艺","199905654"] ];
/* 画日历并播放今天曲目 */
(function () {
let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
let output = ar.join('');
let y = new Date().getFullYear(), m = new Date().getMonth();
let days = new Date(y, m+1, 0).getDate();
let day1st = new Date(y, m).getDay();
let today = new Date().getDate();
Array.from({length: days + day1st}).forEach((item,key) => {
let idx = key < day1st ? '' : (key - day1st + 1);
if(idx) {
if(idx == today) idx = `<span id="iRed">${idx}</span>`;
let sUrl = songs, sName = songs;
output += `<div class="tbox" title="${sName}" onclick="playSong(${sUrl},'${sName}');this.style.color='navy';">${idx}</div>`;
}else{
output += '<div class="tbox"></div>';
}
});
rili.innerHTML = output;
rili.dataset.bg = `${y}年${m+1}月`;
let songName = songs, songUrl = songs;
playSong(songUrl,songName);
})();
/* 播放音频函数 ：相同的url前缀 + 不同的后缀id */
function playSong(id,song) {
let url = 'https://www.qqmc.com/up/kwlink.php?id=' + id ;
aud.src = url;
mydiv.dataset.title = song;
};
/* 其他相关操作 */
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
font-size: 30px;
color: #ff0000;
position: relative;
text-align:center;
transform: translate(0%,35%);
font-weight: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
-webkit-animation:loop 3s linear 1000000;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
.tit {
position: relative;
width: 700px;
top: -780px;
left: -500px;;
font-family:迷你简细圆;
font-size: 56px;
text-shadow: 2px 2px #ff00ff;
font-weight:bold;
color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span> - - 《 霍 云 龙 歌 曲 选 听 》 - - </span>
<span > </span></div>
<div style="position: relative;width: 500px;height: 50px;top:-100px;LEFT: 800px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
</style>
霍云龙歌曲专辑，这个真好。
图片也好，再美好的环境里喝着香茶听歌，真是好享受啊{:4_199:} 一首首听下来，好听。欣赏亦是金老师好帖{:4_187:} 本帖最后由 亦是金 于 2024-1-6 17:50 编辑
问好红影！谢谢捧场！ 在图有歌有情人{:4_173:}制作太精彩了！ 前辈，你这动图做的很漂亮的，还非常的勤劳。这么多歌曲都上去了，昨天我偷懒就上传几首都是黑黑的歌曲{:4_189:} 樵歌 发表于 2024-1-6 21:17
在图有歌有情人制作太精彩了！
樵哥哥真会欣赏，这么知道就是情人呢？{:4_170:} 欣赏前辈的精彩制作{:4_187:} https://img.zcool.cn/community/01e6ff581db0ffa84a0d304fe1718a.gif 樵歌 发表于 2024-1-6 21:17
在图有歌有情人制作太精彩了！
谢谢樵歌欣赏点赞！{:4_190:} 小辣椒 发表于 2024-1-6 21:50
前辈，你这动图做的很漂亮的，还非常的勤劳。这么多歌曲都上去了，昨天我偷懒就上传几首都是黑黑的歌曲{:4_ ...
问好小辣椒！用酷我的歌曲链接，较快就做好了！{:4_187:} 小辣椒 发表于 2024-1-6 21:52
欣赏前辈的精彩制作
谢谢夸奖！{:4_187:} 起个网名好难 发表于 2024-1-6 22:37
问好老师！谢谢欣赏！{:4_190:} 有日历效果了{:4_199:} 制作真漂亮，亦是金老师好制作{:4_199:} 亦是金 发表于 2024-1-6 22:40
谢谢樵歌欣赏点赞！
谢谢您的美好作品带给我们美好的享受呢{:4_190:} 小辣椒 发表于 2024-1-6 21:52
樵哥哥真会欣赏，这么知道就是情人呢？
瞧那俩人那暧昧小样，肯定不是小夫妻{:4_189:} 都是经典！制作真棒！ 慢慢欣赏！
{:4_204:}{:4_191:}{:4_178:}
页:
[1]