寒冬残荷 发表于 2022-9-24 22:42

试贴：《且行且珍惜》

<style>
.txtBox {margin: auto; width:720px; min-width:700px; min-height:520px; background-image:linear-gradient(#fff 29px, #ed8181db 0); background-size: 30px 30px; font: normal 18px / 30px 楷体; color:#bb3d00; border:30px solid #fff; position: relative;}
.txtBox::before, .txtBox::after {position:absolute; color:#ccc; text-align:right; width:720px; height:30px; font-size:14px; background: #fff; border: 20px;}
.txtBox::before {content: attr(data-1);top:-30px;border-bottom: 2px solid red;}
.txtBox::after {content: attr(data-2);bottom:-30px;border-top:2px solid red;}
</style>
<div style="position:relative; width: 760px; height: 850px; margin: 15px auto; ">
<div class="txtBox" data-1="花潮稿纸" data-2="Copyright © 2022 All Right Reserved">
<span style="font-weight: bold; text-align:center; font-size : 24px ">　　　　　　　　　　【萦儿心语】且行且珍惜</span><br><br>　　不知什么时候开始喜欢读白落梅的书，还很疯狂的买下了她所有出版的书籍。那些午后的时光里，那些微雨的季节里，都是捧着她的书渡过。一椅、一书、一曲、一咖啡，就这样，让时光老去。<br>　　喜欢白落梅，是因为她的笔下没有风华绝代，只有岁月静好。她的文字那么素净，给人如沐春风的感觉。她的文字，又像一杯清茶，清香淡雅，沁人心脾。因为她的文字，我走近了林徽因，走近了张爱玲；因为他的文字，我接触了唐诗宋词，随即让我有了学填诗词的冲动；因为她的文字，我知道了纳兰容若和仓央嘉措，让我对爱情有了更深的理解。<br>　　《爱如禅 你如佛》，又名《恨不相逢未剃时：情僧苏曼殊的红尘游历》，介绍了苏曼殊，一个被世人称作诗僧、画僧、情僧、革命僧的传奇人物。他活了短短35年，或许在别人的眼里，这35年太短，但我觉得他可能已经够了，因为他已经看透了红尘，继续下去只有更痛苦。<br>　　书中这样介绍苏曼殊：他是个僧人，披着袈裟，竹杖芒鞋在人间游走，莲台才是他最后的家；他是一个情种，身着西服，风度翩然嬉笑于秦楼楚馆，红颜才是他心灵的归所；他是一个志士，在时代的滚滚洪流下，惊奇风云万张；他是一个伶人，在人生这个色彩纷呈的舞台上，演绎这一场又一场阴晴圆缺的戏。<br>　　白落梅说：每个人都是矛盾体，坚强又软弱，乐观又悲情，仁慈又邪恶。是的，回想自己，我想安然，但做不到淡定；我想给大家带来快乐，又时常不经意地伤害别人。其实又何必那么执着，风雨人生，走过之后再去回首，一切都已是寻常。真的不必再去纠结什么，因为有缘才能够相遇，才能让我们在这个红尘里安然相守。<br>　　套用时髦的一句话：且行且珍惜。那么就让我们珍惜现在，要知道世间所有相遇都是久别重逢。<br> <br><br>
</div>
<style>
.lrcShow{font:bold 26px 微软雅黑; background-image:linear-gradient(-90deg,#ff0000,#f9f900);color:transparent; letter-spacing:2px; background-position:100% 100%; background-size:200% 200%; -webkit-background-clip:text; -webkit-text-stroke:1px #f75000; border:0px #ffffff solid; }
@keyframes bgMove1{from{background-position:0 0;}to{background-position:-100% 0;}}
@keyframes bgMove0{from{background-position:0 0;}to{background-position:-100% 0;}}

.mCtrl{border:2px solid #000000; border-radius:50%; display:inline-block; width:50px; height:50px; margin:0px; position:absolute; bottom:70px; right:10px; transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg); background-size:100% 100%; background-position:0 0; background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png); }

.z360z{animation:rotating 5s linear infinite;}
@keyframes rotating{
0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}

.wzsd1 { animation: wzsd 0.26s linear infinite ; }
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}

</style>

<div class="wzsd1" style="position:absolute; width:640px;height:70px; position:absolute; bottom:35px; left:80px; border:0px #FF4A20 solid;text-align:center;line-height: 70px;　">

<div class="lrcShow" id='sLRC'></div>

</div>

<div id="mDisk" class='mCtrl'></div>

</div>

<script type="text/javascript">
var lrcPlayerZ = function() {
return this.init.apply(this, arguments)
};
lrcPlayerZ.prototype = {
constructor: lrcPlayerZ,
init: function(opts) {
lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
this.showLrcObj = document.getElementById(opts.lrcShowID);
this.audioCtrl = document.getElementById(opts.audioCtrl);
this.lrcVec = this.handleLrc(lyricTxt);
this.genPlayer(opts.audioURL);
},
handleLrc: function(lyricTxt) {
var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
var lrcs = new Array();
for (let index = 0; index < parts.length; index++) {
let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
if (chkTime) {
tIdx = parts.lastIndexOf(']');
if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
for (m = 0; m < chkTime.length; m++) {
ta = chkTime.substr(1).replace(']', '').split(/:/);
_0 = (+ta) * 60 + (+ta);
lrcs.push({
seconds: _0,
words: lrcTxt
})
}
}
}
return lrcs.sort(function(a, b) {
return (a.seconds - b.seconds)
})
},
showLrc: function(durTime) {
this.showLrcObj.innerHTML = this.lrcVec.words;
this.showLrcObj.style.animation = 'bgMove' + (this.idx % 2) + ' ' + durTime + 'ms linear forwards';
this.idx++
},
genPlayer: function(mUrl) {
this.mObj = document.createElement("audio");
this.mObj.loop = false;
this.mObj.muted = false;
this.mObj.autoplay = true;
this.mObj.src = mUrl;
this.showLrcObj.appendChild(this.mObj);
var that = this;
var turn = 0;
this.idx = 0;
this.mObj.addEventListener('ended', function() {
that.idx = 0;
that.audioCtrl.classList.remove('z360z');
this.play()
});
this.mObj.addEventListener('play', function() {
that.audioCtrl.classList.add('z360z');
if (that.showLrcObj.style.animationPlayState == 'paused') that.showLrcObj.style.animationPlayState = 'running'
});
this.mObj.addEventListener('pause', function() {
if (that.idx == 1 && this.currentTime < 1) {
that.mObj.play();
return false
}
that.audioCtrl.classList.remove('z360z');
if (that.showLrcObj.style.animationPlayState == 'running') that.showLrcObj.style.animationPlayState = 'paused'
});
this.mObj.addEventListener('error', function() {
console.log("audio wrong, remove play start event");
that.showLrcObj.style.display = 'none';
that.showLrcObj.removeChild(this)
});
this.mObj.addEventListener('timeupdate', function() {
if (that.idx < that.lrcVec.length) {
if (this.currentTime >= that.lrcVec.seconds) {
if (that.idx < (that.lrcVec.length - 1)) {
that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000)
} else {
that.showLrc(3000)
}
}
}
});
this.audioCtrl.addEventListener('click', function() {
if (that.mObj.paused) {
that.mObj.play()
} else {
that.mObj.pause()
}
})
}
}
</script>
<script type="text/javascript">
var lrc =`

且行且珍惜 - 王淼
词：周兵
曲：李风持
曲：李风持
炊烟起了 我在门口等你
夕阳下了 我在山边等你
叶子黄了 我在树下等你
月儿弯了 我在十五等你
愿执子之手 一生有你
繁华散尽依然不离不弃
前世的擦肩今生再相遇
所以莫负生命这一场花季
愿与子同袍 一生有你
海枯石烂也要和你在一起
多少的期许刻在掌心里
所以莫负天地且行且珍惜
啦
细雨来了 我在伞下等你
流水冻了 我在河畔等你
生命累了 我在天堂等你
我们老了 我在来生等你
愿与子同袍 一生有你
海枯石烂也要和你在一起
在一起
多少的期许刻在掌心里
掌心里
所以莫负天地且行且珍惜
炊烟起了 我在门口等你
等你
夕阳下了 我在山边等你
等你
叶子黄了 我在树下等你
等你
月儿弯了 我在十五等你
莫负天地且行且珍惜
【谢谢观看！】

`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/40655346.mp3'
};
new lrcPlayerZ(opts);
</script>

寒冬残荷 发表于 2022-9-24 22:42

奇怪，同样的代码，在那里就不得！

寒冬残荷 发表于 2022-9-24 22:45

还是这里的系统OK！电脑上和手机上都正常显示。那里的JS部分不显示，在手机上JS部分虽显示，但不正常，且页面不像这里这样可以放大和缩小。还是在这里混吧，到那里学习东西还是可以的！

195400 发表于 2022-9-25 01:37



手机 花潮论坛

195400 发表于 2022-9-25 01:39

http://www.yinhuabbs.cn/data/attachment/forum/202010/12/172647bijvw4odjdpddjpd.gif

红枫 发表于 2022-9-25 07:19

欣赏！学习！！感谢分享！！！

中画网里的《公共上传》专柱，是花湖论坛的作品寄生地和测试场。他们的好多好多作品都是链接于中画网此专栏里的。

非常开心 发表于 2022-9-25 08:07

欣赏楼主的新作，点赞多谢分享！

红枫 发表于 2022-9-25 09:02

寒冬残荷 发表于 2022-9-24 22:42
奇怪，同样的代码，在那里就不得！

至少我知道，花潮新手上路图片上传限定一次不大于180K乃。

寒冬残荷 发表于 2022-9-25 10:31

还是这里好玩！:lol

195400 发表于 2022-9-25 12:45

寒冬残荷 发表于 2022-9-25 10:31
还是这里好玩！

人气差点                  
页: [1] 2
查看完整版本: 试贴：《且行且珍惜》