谢谢红影支持！
感觉这只鹰还可以再高点，到那女子视线上面一点点会更好，让鹰飞那么低有点委屈它呢{:4_173:} 本帖最后由 加林森 于 2022-6-16 21:04 编辑 <br /><br />红影 发表于 2022-4-20 19:45
感觉这只鹰还可以再高点，到那女子视线上面一点点会更好，让鹰飞那么低有点委屈它呢
这个可以调上去的。
<style>
/* 帖子外层 */
.outer {
left: -214px; /* 水平定位*/
width: 1024px; /* 帖子宽度 */
height: 682px; /* 帖子高度 */
background: #ccc url('https://pic.imgdb.cn/item/62aa9a3009475431296581ff.jpg') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
font: bold 1em sans-serif; /* 文本 */
color: #fff; /* 字体颜色 */
text-shadow: 1px 1px 2px #000; /* 文本阴影 */
background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
border-radius: 100% 0; /* 盒子边框 */
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>
<div class="outer">
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90857.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
['3.15','美丽的佩枯措 - 泽旺多吉'],
['5.72','词：任庆士'],
['7.74','曲：饶荣发'],
['38.86','天上的西藏有条长长的大河'],
['49.43','迷恋那佩枯措湛蓝的秋波'],
['57.47','湖岸上雕塑着远古的诉说'],
['66.08','转湖人吟诵悠扬的长歌'],
['81.29','心中的西藏有座高高的雪山'],
['91.54','佩枯措映照着它的巍峨'],
['99.70','湖面上鸥鸟展翅飞翔'],
['108.12','牧羊姑娘高唱嘹亮的情歌'],
['120.57','呀啦嗦美丽的佩枯措'],
['128.85','呀啦嗦美丽的佩枯措'],
['137.27','多少人从你的身旁走过'],
['145.22','都带走啊都带走你圣洁的嘱托'],
['189.97','心中的西藏有座高高的雪山'],
['200.23','佩枯措映照着它的巍峨'],
['208.81','湖面上鸥鸟展翅飞翔'],
['216.99','牧羊姑娘高唱嘹亮的情歌'],
['228.03','呀啦嗦美丽的佩枯措'],
['235.62','呀啦嗦美丽的佩枯措'],
['244.34','多少人从你的身旁走过'],
['252.69','都带走啊都带走你圣洁的嘱托'],
['261.55','呀啦嗦呀啦嗦'],
['272.03','美丽的佩枯措佩枯措']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script>
红影 发表于 2022-4-20 19:42
是保卫美人才对
都必须保护才行。{:4_189:} 东篱闲人 发表于 2022-4-20 19:30
{:5_116:} 红影 发表于 2022-4-20 19:45
感觉这只鹰还可以再高点，到那女子视线上面一点点会更好，让鹰飞那么低有点委屈它呢
现在调整了，你再看看。
页:
1
[2]