《遥远的她》 张学友 （跟马黑黑的教程制作）TO：马黑黑
本帖最后由 加林森 于 2022-2-14 19:03 编辑 <br /><br /><img src="https://pic.imgdb.cn/item/620a34012ab3f51d91c4dca6.jpg"><style type="text/css">
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; 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="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/88651.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
var x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script>
遥远的她-张学友
让晚风轻轻吹送了落霞我已习惯每个傍晚去想她在远方的她 此刻可知道这段情在我心始终记挂在这半山那天我知我知快将要别离没说话望向她却听到她说不要相约纵使分隔 相爱不会害怕遥遥万里 心声有否偏差正是让这爱试出真与假遥远的她仿佛借风声跟我话热情若冇变 哪管它沧桑变化但这天收到她爸爸的一封信信里面说血癌已带走她但觉得空虚的心仿佛已僵化过去事像炮弹 心中爆炸在这半山这天我悲痛悲痛不已在胡乱说话夜雨中似听到她说不要相约纵使分隔 相爱不会害怕人无觅处心声有否偏差正是让这爱试出真与假遥远的她仿佛借风声跟我话热情若冇变 哪管它沧桑变化遥远的她 不可以再归家我在梦里却始终只有她遥远的她可知我心中的说话热情并冇变 哪管它沧桑变化遥远的她 不可以再归家我在梦里却始终只有她遥远的她可知我心中的说话热情并冇变 哪管它沧桑变化
本帖最后由 加林森 于 2022-2-14 20:36 编辑
@马黑黑@ 友昕 @小辣椒 队长学得真好，好看又好听{:4_187:} 这个拼图音画有特色~~~~{:5_116:} 红影 发表于 2022-2-14 19:35
队长学得真好，好看又好听
我在试一试，结果还成功了。{:4_189:} 杨柳青 发表于 2022-2-14 19:48
这个拼图音画有特色~~~~
小青青上来啦。晚上好！{:4_176:}情人节快乐！ @小辣椒@马黑黑 你们来看看这个效果怎么样啊？ 加林森 发表于 2022-2-14 20:08
我在试一试，结果还成功了。
队长厉害，能成功还是很开心的。{:4_187:} 红影 发表于 2022-2-14 20:48
队长厉害，能成功还是很开心的。
我正在制作另外一个 队长速度的，这个播放器做出来了{:4_199:} 加林森 发表于 2022-2-14 20:38
你们来看看这个效果怎么样啊？
队长最好把播放器加进图图里面，这样听歌也是没有问题的 加林森 发表于 2022-2-14 20:08
我在试一试，结果还成功了。
队长学习很认真的{:4_199:} 队长加油！ 加林森 发表于 2022-2-14 20:50
我正在制作另外一个
现在不是玩马甲的时候么，队长咋做起帖子来了{:4_173:} 小辣椒 发表于 2022-2-14 20:58
队长速度的，这个播放器做出来了
是的，就是这个播放器不能放进图片里面去。 小辣椒 发表于 2022-2-14 21:03
队长最好把播放器加进图图里面，这样听歌也是没有问题的
不行的，可能要老黑来看了才知道怎么放进去。 小辣椒 发表于 2022-2-14 21:05
队长学习很认真的
谢谢小辣椒支持！ 红影 发表于 2022-2-14 21:08
现在不是玩马甲的时候么，队长咋做起帖子来了
我放不下老黑的播放器啊。{:4_189:}