老谟深虑 发表于 2023-3-15 15:52

《骆驼沙漠》

空格图片来自飘渺山人老师在甘肃--鸣沙山月牙泉拍摄的美片，在此向飘渺山人老师致谢！这个代码是我把一个只能发图片的代码，编辑加上了同步歌词代码，试贴在此发表，我这边在360浏览器看的正常，不知论坛网友能否正常收看，请告知。谢谢！
<br /><br /><div style="MARGIN-TOP: 30px; MARGIN-LEFT:0px"><embed flashvars="tp=https://pic.imgdb.cn/item/64104ee8ebf10e5d53357086.jpg|https://pic.imgdb.cn/item/64104ee8ebf10e5d53356dfa.jpg|https://pic.imgdb.cn/item/64104ee7ebf10e5d53356d60.jpg|https://pic.imgdb.cn/item/64104ebeebf10e5d5334ec28.jpg|https://pic.imgdb.cn/item/64104ebeebf10e5d5334ebef.jpg|https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb8a.jpg|https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb57.jpg|https://pic.imgdb.cn/item/64104ebeebf10e5d5334eadb.jpg|https://pic.imgdb.cn/item/64104f1bebf10e5d533600f5.jpg&amp;bh=0&amp;sj=4&amp;dh1=http://webftp.bbs.hnol.net/linm/Flash/F1/220.swf,120,120,0,230" height="625" quality="high" src="http://dashan.link/tpll/tpjdqh.swf" type="application/x-shockwave-flash" width="1000" wmode="transparent"></embed></div>
<imgid="mpicc"style="width: 100%; height: 100%;background: url()0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url()0 0/50% 50%" >
<div id="dt" ></div>
<div class="bg"><div id="tx"><canvas id="mplayer"></canvas>
<div id="" style="width: 1164px; height: 160px;position: absolute;top:520px; left:40px;z-index: 10;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>
<div id="img_border" style="width: 150px; height: 150px;mask: radial-gradient(transparent 8px,#red 0);-webkit-mask: radial-gradient(transparent 8px,red 0);background: url()0 0/100% 100%,url()0px 0px/160% 100%;border-radius:50%;"></div>
</div>

</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=486814412.mp3" loop autoplay></audio>


</script>
<style>

.bg{width: 1px;height: 1px;
    margin: 0;position: absolute;top:260px; left:0px;z-index: 10;}
#aud{
    width: 250px;
    display: block;
    margin: 0 auto;}
.btn{
    display: block;
    margin: 0;}
.lrc{
    width: 960px;
    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:0px; left:0px;
    margin: 0 auto;}
.lrc #ullrc{
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;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;
    font-weight: bold}


.lrc #ullrc li.active::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: #000000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
@keyframes bgMove1{from{width:0%;}to{width:100%;filter:hue-rotate(360deg)}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
</style>

<script >var lrc = `
沙漠骆驼 - 展展与罗罗
词：展展与罗罗
曲：展展与罗罗
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;

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');

photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>photos.style.animationPlayState = 'paused');

img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');

</script>





张红 发表于 2023-3-15 17:18

问好朋友
漂亮的制作
欣赏学习了

绿地水池 发表于 2023-3-15 17:57

欣赏佳作，为你点赞。

绿地水池 发表于 2023-3-15 17:59

月牙泉好像改变了样貌？

195400 发表于 2023-3-15 21:23

浏览器不支持flash，把图片拷贝出来看
<img src="https://pic.imgdb.cn/item/64104ee8ebf10e5d53357086.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ee8ebf10e5d53356dfa.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ee7ebf10e5d53356d60.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334ec28.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334ebef.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb8a.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb57.jpg"/>
<img src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eadb.jpg"/>
<img src="https://pic.imgdb.cn/item/64104f1bebf10e5d533600f5.jpg"/>

容轩听雨 发表于 2023-3-15 22:11

好美的大沙漠，一道美丽的风景线，赞一个，问好

老谟深虑 发表于 2023-3-16 16:04

张红 发表于 2023-3-15 17:18
问好朋友
漂亮的制作
欣赏学习了

       谢谢老师的欣赏点评，问好！

老谟深虑 发表于 2023-3-16 16:05

绿地水池 发表于 2023-3-15 17:57
欣赏佳作，为你点赞。

      谢谢老师的欣赏鼓励，下午好！

老谟深虑 发表于 2023-3-16 16:06

绿地水池 发表于 2023-3-15 17:59
月牙泉好像改变了样貌？

       谢谢老师的关注，下午好！

老谟深虑 发表于 2023-3-16 16:07

195400 发表于 2023-3-15 21:23
浏览器不支持flash，把图片拷贝出来看

       谢谢老师的收看，360浏览器可以收看。
页: [1] 2
查看完整版本: 《骆驼沙漠》