《回头太难》 歌手:张学友
本帖最后由 加林森 于 2022-2-22 10:29 编辑 <br /><br /><style>#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/621441cf2ab3f51d910fc59e.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; 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="bigPa">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</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/88698.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");
let 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> 回头太难
歌手:张学友
过了这一夜你的爱也不会多一些你又何必流泪管我明天心里又爱谁我的爱情有个缺谁能让我停歇痴心若有罪情愿自己背不让我挽回是你的另一种不妥协你的永不後悔深深刻刻痛彻我心扉可知心痛的感觉总是我在体会看我心碎你远走高飞一生热爱回头太难苦往心里藏情若不断谁能帮我将你忘一生热爱回头太难情路更漫长从此迷乱注定逃不过纠缠我的爱情有个缺谁能让我停歇痴心若有罪情愿自己背不让我挽回是你的另一种不妥协你的永不后悔深深刻刻痛彻我心扉可知心痛的感觉总是我在体会看我心碎你远走高飞一生热爱回头太难苦往心里藏情若不断谁能帮我将你忘一生热爱回头太难情路更漫长从此迷乱注定逃不过纠缠我的爱情有个缺谁能让我停歇痴心若有罪情愿自己背
好听的歌曲{:4_187:} 红影 发表于 2022-2-22 10:46
好听的歌曲
就是，老歌就是好听。 这个制作挺好看的{:4_204:} 红影 发表于 2022-2-22 19:58
这个制作挺好看的
有种看电影的感觉。{:4_189:} 加林森 发表于 2022-2-22 20:10
有种看电影的感觉。
这个图图选得不错。 歌神经典，也是最喜欢之一，制作真漂亮，{:4_204:} 红影 发表于 2022-2-22 20:20
这个图图选得不错。
嗯嗯，这几天就是在找感觉呢。 大猫咪 发表于 2022-2-22 20:24
歌神经典，也是最喜欢之一，制作真漂亮，
都是天王，哈哈。{:4_204:} 嗯嗯 经典咏流传{:4_187:} 大猫咪 发表于 2022-2-22 20:27
嗯嗯 经典咏流传
另外两个天王的歌曲我还没有找到。 加林森 发表于 2022-2-22 20:34
另外两个天王的歌曲我还没有找到。
慢慢找队长 {:4_204:} 大猫咪 发表于 2022-2-22 20:35
慢慢找队长
嗯嗯，明天去找了。 加林森 发表于 2022-2-22 20:25
嗯嗯，这几天就是在找感觉呢。
对着的图图越弄越好了呢{:4_187:} 红影 发表于 2022-2-22 20:41
对着的图图越弄越好了呢
选好了图片，自己再加工一下就行了吧。 加林森 发表于 2022-2-22 20:42
选好了图片，自己再加工一下就行了吧。
找图图也是挺有讲究的，要喝歌曲相称。队长这个很漂亮{:4_187:} 红影 发表于 2022-2-22 20:47
找图图也是挺有讲究的，要喝歌曲相称。队长这个很漂亮
是的，我的美术功底出来了。{:4_189:} 加林森 发表于 2022-2-22 20:54
是的，我的美术功底出来了。
这样很不错。 队长现在玩这个播放器很溜了，就是这个图配的不搭{:4_173:}
页:
[1]
2