汪明荃 - 万水千山总是情 (广场舞)[全动图一键可控]
本帖最后由 亚伦影音工作室 于 2023-11-26 13:50 编辑 <br /><br /><style>#papa {margin: 10px -300px;
width: 1164px;
height: 640px;
background:#000000 url(https://pic.imgdb.cn/item/6562dc6bc458853aefee7156.gif)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;}
#bt{ color: #000000; position: absolute; left:3%;top:5%;font-size: 30px; font-family:华文隶书;z-index: 11; animation: wz 20s linear infinite ; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);cursor: pointer;}
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1; left: 60%;}
}
#dtp{position: absolute;top:0%; left:10%;width: 80%;z-index:3;}
#jzg {position: absolute;
top:60%; left:10%;z-index: 120;
width: 220px;filter:hue-rotate(20deg);
height:210px;
}
#wudao {position: absolute;
top:40%; left:40%;z-index: 3;
width: 230px;
height:200px;
}
#jita {position: absolute;
top:40%; left:70%;z-index: 3;
width: 250px;
height:300px;
}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<style>
#klok{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
background-repeat:no-repeat;
line-height:35px;
-webkit-animation:loop 0.56slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -2200px 0;filter:hue-rotate(360deg)contrast(120%)brightness(350%);}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img"><div id="bt">汪明荃-万水千山总是情 (广场舞)</div></div>
<div id="dtp"><img id="tu" src="https://pic.imgdb.cn/item/652d1713c458853aefa00131.gif" width="100%" height="100%"></div>
<div id="wudao"><img id="wd" src="https://pic.imgdb.cn/item/652deeb7c458853aef4311e1.gif" width="100%" height="100%">
</div>
<div id="jita"><img id="jt" src="https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif" width="100%" height="100%">
</div>
<divclass="lrc" >
<div id="klok"><ul id="ullrc">
</ul> </div>
</div>
<div id="jzg"><img id="an" src="https://pic.imgdb.cn/item/6562dab1c458853aefe8488e.gif" width="100%" height="100%">
<audio id="aud" src="https://www.qqmc.com/mp3/music57686895.mp3" loop autoplay></audio>
</di>
<script>
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
/*控制 文字颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
</script>
<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:81%; left:0%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{cursor: pointer;
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `汪明荃 - 万水千山总是情 (广场舞)
词：邓伟雄
曲：顾嘉辉
莫说青山多障碍
风也急风也劲
白云过山峰也可传情
莫说水中多变幻
水也清水也静
柔情似水爱共永
未怕罡风吹散了热爱
万水千山总是情
聚散也有天注定
不怨天不怨命
但求有山水共作证
莫说青山多障碍
风也急风也劲
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
jzg.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image0.style.opacity = '';image1.style.opacity = '';;image2.style.opacity = '';image3.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image0= document.getElementById("tu");
var image1= document.getElementById("an");
var image2= document.getElementById("wd");
var image3= document.getElementById("jt");
jzg.onclick =function() { aud.paused ? (image0.stop(),image1.stop(),image2.stop(),image3.stop()):(image0.play(),image1.play(),image2.play(),image3.play())};
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
</script>
我一句也听不懂（看歌词字幕懂了），但我很喜欢这首歌。 这个制作好漂亮，两个弹琴敲鼓动图的特别好看，跳舞的动态也漂亮。欣赏亚伦老师好帖{:4_199:} 一键全控，虽然是静图替换的，也挺不容易的{:4_187:} 红影 发表于 2023-10-17 19:44
一键全控，虽然是静图替换的，也挺不容易的
没有静态替换，是直接停在第一帧上！ 亚伦影音工作室 发表于 2023-10-17 19:48
没有静态替换，是直接停在第一帧上！
哦，不能停在需要停的那帧上么。 欣赏！{:4_204:}
页:
[1]