《兰亭序》 周杰伦 祝花潮论坛朋友们元宵节快乐！
本帖最后由 加林森 于 2022-2-15 11:42 编辑 <br /><br /><style>#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/620b15f52ab3f51d916c828b.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/88658.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> 本帖最后由 加林森 于 2022-2-15 11:21 编辑
歌名：兰亭序
歌手：周杰伦(JayChou)
词：方文山曲：周杰伦编曲：钟兴民
兰亭临帖行书如行云流水
月下门推心细如你脚步碎
忙不迭千年碑易拓
却难拓你的美
真迹绝真心能给谁
牧笛横吹黄酒小菜又几碟
夕阳余晖如你的羞怯似醉
摹本易写而墨香不退
与你共留余味
一行朱砂到底圈了谁
无关风月我题序等你回
悬笔一绝那岸边浪千叠
情字何解怎落笔都不对
而我独缺你一生的了解
无关风月我题序等你回
悬笔一绝那岸边浪千迭
情字何解怎落笔都不对
而我独缺你一生的了解
无关风月我题序等你回
悬笔一绝那岸边浪千迭
情字何解怎落笔都不对
而我独缺你一生的了解
弹指岁月倾城顷刻间烟灭
青石板街回眸一笑你婉约
恨了没你摇头轻叹
谁让你蹙着眉
而深闺徒留胭脂味
人雁南飞转身一瞥你噙泪
掬一把月手揽回忆怎么睡
又怎么会心事密缝绣花鞋
针针怨对
若花怨蝶你会怨着谁
无关风月我题序等你回
悬笔一绝那岸边浪千叠
情字何解怎落笔都不对
而我独缺你一生的了解
无关风月我题序等你回
手书无愧无惧人间是非
雨打蕉叶又潇潇了几夜
我等春雷来提醒你爱谁
@马黑黑@小辣椒@红影@绿叶清舟 这个很美{:4_199:} 马黑黑 发表于 2022-2-15 11:52
这个很美
老黑元宵节快乐！{:4_191:} 本帖最后由 元杉 于 2022-2-15 13:01 编辑
嘿嘿~{:4_334:} 元杉 发表于 2022-2-15 12:37
我们的好队长
嘿嘿~
忘记说啦，借用你的代码制作出来的，真的很感谢你！祝你元宵节快乐！{:4_187:} 加林森 发表于 2022-2-15 13:01
忘记说啦，借用你的代码制作出来的，真的很感谢你！祝你元宵节快乐！
不用客气，他的就是我的，我的就是你的，你的还是你的 元杉 发表于 2022-2-15 13:02
不用客气，他的就是我的，我的就是你的，你的还是你的
那就更加感谢你的大公无私了。{:4_176:} 制作真漂亮， 赞！队长元宵节快乐！
{:4_179:}{:4_204:}{:4_190:} 好听，欣赏队长漂亮的好帖{:4_187:} 大猫咪 发表于 2022-2-15 13:43
制作真漂亮， 赞！队长元宵节快乐！
谢谢猫猫支持！{:4_204:}猫猫元宵节快乐！{:4_190:} 红影 发表于 2022-2-15 13:45
好听，欣赏队长漂亮的好帖
谢谢红影支持。{:4_187:}祝红影元宵节快乐！{:4_204:} 听歌来啦~~{:4_189:} 杨柳青 发表于 2022-2-15 20:26
听歌来啦~~
欢迎欢迎。{:4_190:} 加林森 发表于 2022-2-15 20:32
欢迎欢迎。
{:4_208:} 队长厉害啊，这个做得漂亮 绿叶清舟 发表于 2022-2-15 20:45
队长厉害啊，这个做得漂亮
谢谢清舟。{:4_187:}{:4_204:} 杨柳青 发表于 2022-2-15 20:39
{:4_208:} 加林森 发表于 2022-2-15 20:53
谢谢清舟。
队长客气了
页:
[1]
2