加林森 发表于 2021-11-10 20:47
谢谢小辣椒帮忙啊。
队长千万别客气{:4_187:}
本帖最后由 加林森 于 2022-2-26 11:23 编辑 <br /><br />小辣椒 发表于 2021-11-10 20:48
队长千万别客气
嗯嗯，谢谢了！{:4_204:}
<style type="text/css">
.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
</style>
<div class="mnBox">
<div class="ctBox">
<p style="text-align:center;"><img alt="570" height="570" src="https://pic.imgdb.cn/item/621994eb2ab3f51d915c788d.jpg" /><br></p>
<h2 style="padding-bottom: 10px;">我和春天有个约会</h2>
<h2 style="text-align:center;">演唱：邝美云</h2>
<pre>
所属专辑：精选 邝美云
如果你愿意 我可以
永远像现在般美丽
因为我 生而为爱痴迷
如果你有情 这世界
可以不需要再有四季
我的心早已经 色彩分明
多少爱情正甜蜜
多少童话在凋零
然而我始终相信
我将得到永恒的幸运
再也不必 为情所苦
真爱不用再分离
只要能用心经营
就会 幸福 到底
如果你愿意我可以
永远像现在这般美丽
因为我生而为爱痴迷
如果你有情
这世界可以不需要再有歌曲
我的心 早已经 充满了旋律
Music
纷乱人世间
除了你 一切繁华都是背景
这出戏用生命演下去
付出的青春不可惜
今生难得有这番约定
这段情只对你 和 我 有 意 义
Music
不管这世界阴晴圆缺
只愿和春天有个约会
I have date with spring
</pre>
<p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢黑黑老师及小辣椒的精彩分享</marquee></p>
<style>
/* 父盒子 */
#wyyBox {
margin: 10px auto;
width:300px;
height: 52px;
text-align: center;
}
/* 播放器 */
#wyyBox iframe {
width: 298px;
height: 52px;
border: none;
/*切割 clip-path: circle(16px at 271px); */
}
</style>
<div id="wyyBox"></div>
<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=253244&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>
<p style="margin: 20px; text-align:center;">加林森2022 02 26</p>
</div>
</div>
<script language="javascript">
this.play();
}
</script>
本帖最后由 加林森 于 2022-2-26 19:24 编辑 <br /><br />马黑黑 发表于 2021-11-10 20:47
还行还行
服你了行不行？
<style type="text/css">
/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/6219a87c2ab3f51d91858c76.jpg') no-repeat; padding: 12px; }
/* 帖子标题 */
#txtDiv { position: absolute; color:#ddd; font-weight:bold; font-size: 2em; text-shadow: 2px 2px 4px #ccc; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 500px; top: 40px; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 20px; font-size: 1em; line-height: 20px; color: #fff; text-shadow: 1px 1px 2px red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 450px; width: 8px; height: 8px; background: white; border: 13px solid; border-color: orange green; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25); cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="waiDiv">
<div id="txtDiv">回<br>来<br>爱<br>的<br>身<br>边</div>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="https://www.joy127.com/url/88732.mp3"></audio>
<script language="javascript">
var lrcAr=[
["00:00:00","回来爱的身边-林忆莲"],
["00:49.00","触不到你的梦"],
["00:50.22","感不到你心动"],
["00:51.15","听不到你的话"],
["00:53.76","听得到我哭吧"],
["00:54.92","又站在你眼前"],
["00:55.35","望着是你默然"],
["00:56.58","正要强忍不哭"],
["00:57.18","那里禁得心酸"],
["00:58.46","知不知我呼唤"],
["00:59.57","知不知我依伴"],
["01:02.71","知不知我心乱"],
["01:03.41","知不知我不断"],
["01:04.67","念着是你当年"],
["01:06.04","日夜在痛缠绵"],
["01:08.31","纵似爱的深渊"],
["01:10.57","我却再想依恋"],
["01:18.10","回来爱的身边"],
["01:22.43","这天"],
["01:24.70","回来爱的身边"],
["01:28.85","可否给我热暖"],
["01:31.40","我是舍不得爱恋"],
["01:34.78","可知我心里依然"],
["01:45.04","知不知我呼唤"],
["01:48.12","知不知我依伴"],
["01:50.95","知不知我心乱"],
["02:04.39","知不知我不断"],
["02:08.19","念着是你当年"],
["02:15.56","但愿让我回旋"],
["02:34.88","再爱你多一点"],
["02:58.10","再爱你多一天"],
["03:06.55","求你也再次为我醉一遍"],
["03:24.20","爱就算曾离弃过尚有点"],
["03:48.81","OOH"],
["03:53.20","可不可再次热恋"],
["03:56.72","说吧说声但求承认"],
["03:58.44","爱尚有的是明天"],
["04:10.04","回来爱的身边留多一天"],
["04:40.81","(这天)"],
["04:43.10","回来爱的身边"],
["04:47.60","可知一切未变"],
["04:49.57","我是舍不得爱恋"],
["04:56.07","可否再一次依然"],
["04:59.92","让我躺于你的肩"],
["05:03.61","让我安躺于你的肩"],
["05:18.33","回来爱的身边"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
var mbtn = document.getElementById('btn-ro'); //播放暂停按钮
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#fff";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "orange";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
// 按钮相关
myaud.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mbtn.onclick = function(){ myaud.paused ? (myaud.play(), this.style.animationPlayState="running") : (myaud.pause(), this.style.animationPlayState="paused"); }
</script>
小辣椒 发表于 2021-11-10 20:47
好了，队长可以编辑进去看看，原来1280X750现在是1280x600
我看了，谢谢你帮忙啊。{:4_204:}
加林森 发表于 2021-11-10 20:53
服你了行不行？
行的行的
马黑黑 发表于 2021-11-10 20:56
行的行的
{:4_170:}
队长厉害这个漂亮
绿叶清舟 发表于 2021-11-10 21:00
队长厉害这个漂亮
我现在成搬家公司了{:4_170:}
加林森 发表于 2021-11-10 21:11
我现在成搬家公司了
货拉拉都不用了啊{:4_189:}
绿叶清舟 发表于 2021-11-10 21:21
货拉拉都不用了啊
就是就是，哈哈哈哈。
加林森 发表于 2021-11-10 20:00
嗯嗯，全部搬回来不容易啊。
这个长宽比和别的不一样，高度可以适当小点的。
红影 发表于 2021-11-10 22:04
这个长宽比和别的不一样，高度可以适当小点的。
多少好点呢？
加林森 发表于 2021-11-10 22:14
多少好点呢？
通常按比例放大比较好，可以先看看比例的啊。
红影 发表于 2021-11-10 22:43
通常按比例放大比较好，可以先看看比例的啊。
嗯嗯，明白了。谢谢啊！{:4_187:}
加林森 发表于 2021-11-10 23:37
嗯嗯，明白了。谢谢啊！
没事啊，我也是一个个去看过，才知道那些视频有不同的长宽比例的。
红影 发表于 2021-11-11 09:19
没事啊，我也是一个个去看过，才知道那些视频有不同的长宽比例的。
是的，先看看就好处。
加林森 发表于 2021-11-11 09:42
是的，先看看就好处。
主要那些也好看，看着很开心。
红影 发表于 2021-11-11 11:02
主要那些也好看，看着很开心。
就是就是。
加林森 发表于 2021-11-11 11:04
就是就是。
我没事就去看的，阳光哥哥分享了好多的好东西呢。
红影 发表于 2021-11-11 11:19
我没事就去看的，阳光哥哥分享了好多的好东西呢。
我告诉他了，他负责取回来，我负责把好的制作出来让大家开心。