本帖最后由 南无月 于 2024-6-29 21:52 编辑 <br /><br /><style>
#papa { --width: 1700px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 900px; background: url('https://642303.freep.cn/642303/tu/bei.webp') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
#papa::before { position: absolute; content: url('https://642303.freep.cn/642303/tu/gufengnv01.png'); z-index: 3;}
#txtbox { position: absolute; right: 360px; top: 280px; width: 340px; min-height: 90px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 30px/36px sans-serif; color: SaddleBrown; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#player { position: absolute; width: 120px; right: 880px; bottom: 310px; cursor: pointer; animation: rot 6s linear infinite;opacity: 0.65; z-index: 5;}
#vid1 { position: absolute; width: 580px; height: 580px; left:310px;top:80px;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;transform: rotateY(180deg); }
#vid2 { position: absolute; width: 100%; height: 100%; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%);object-fit: cover; mix-blend-mode: screen; opacity: 0.9; pointer-events: none; z-index: 4;transform: rotateY(180deg);}
.tMid, .tRight { display: inline-block; width: 100%; }
.tMid { text-align: center; }
.tRight { text-align: right; font-size: 18px; }
@keyframes move { to { transform: translate(0); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1909961703" autoplay loop></audio>
<video id="vid1" src="https://img.tukuppt.com/video_show/19287209/00/14/63/5e58bbdc51116.mp4" muted autoplay loop></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f470c613a.mp4" muted autoplay loop></video>
<div id="txtbox"></div>
<img id="player" alt="" src="https://638183.freep.cn/638183/small/hxxb.webp" title"播放/暂停" />
</div>
<script>
var txtAr = [
`<span><strong>《诗经 邶风 击鼓》</strong></span><br><br>\n击鼓其镗，踊跃用兵。\n土国城漕，我独南行。\n从孙子仲，平陈与宋。\n不我以归，忧心有忡。\n爰居爰处？爰丧其马？\n于以求之？于林之下。\n死生契阔，与子成说。\n执子之手，与子偕老。\n于嗟阔兮，不我活兮。\n于嗟洵兮，不我信兮。\n`,
`<span><strong>‌‌‌‌《 长 相 思 》</strong></span><br><br>\n日色欲尽花含烟，\n月明欲素愁不眠。\n赵瑟初停凤凰柱，\n蜀琴欲奏鸳鸯弦。\n此曲有意无人传，\n愿随春风寄燕然。\n忆君迢迢隔青天。\n昔时横波目，\n今作流泪泉。\n不信妾肠断，\n归来看取明镜前。\n<span class="tRight">——[唐]李白</span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;
var addPs = () => {
var txtstr = txtAr;
txtbox.innerHTML = '';
paras.length = 0;
var ar = txtstr.split(/\n/).filter(item => item !=='');
ar.forEach((p,k) => {
var para = document.createElement('p');
para.innerHTML = p;
para.style.cssText += `transform: translate(${ww}px);`;
txtbox.appendChild(para);
paras.push(para);
});
curIdx = (curIdx + 1) % txtAr.length;
mkAni();
};
var parasReset = () => {
addPs();
paras.forEach(p => {
p.style.animationName = '';
p.style.transform = 'translate(${ww}px)';
setTimeout( () => { paras.style.animationName = 'move'; }, 500);
});
};
var mkAni = () => {
paras.forEach((p,k) => {
p.onanimationend = () => {
paras[(k+1) % paras.length].style.animationName = 'move';
if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
};
});
};
var mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
aud.paused ?(vid1.pause(),vid2.pause()) :(vid1.play(), vid2.play());
player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
addPs();
paras.style.animationName = 'move';
</script>
马黑黑 发表于 2024-3-23 18:15
动网死掉了，现在是 discuz! 的天下，湾湾那边也都在用，目前由腾讯维护，早升级了的，是樵歌的论坛不敢 ...
原来是这样。。关于论坛所知不多。
腾讯维护也是没想到。它管的还挺多。。
我网站里那个抠图链接就是腾讯管的。
不过百度里现在图片都加了精修，去水印等，搜到图后可以先做简单的处理。。
也挺方便。。
马黑黑 发表于 2024-3-23 18:15
就按一下它，然后一般向右看
就在这个页面按了一下，看了。。没叉啥的。。
南无月 发表于 2024-3-23 21:51
原来是这样。。关于论坛所知不多。
腾讯维护也是没想到。它管的还挺多。。
我网站里那个抠图链接就是腾 ...
腾讯有个特点，就是谁做的东东好了，就买下来。比方说腾讯做输入法，叫QQ输入法，做的不咋地，但它看上了搜狗，就把搜狗弄了过去。搜狗本来也不情愿，可那时周鸿祎也看上搜狗，搜狗的创始人不喜欢周老板，就改嫁给腾讯，以求万福。不过腾讯对搜狗还算厚道，它要搜狗团队把QQ输入法弄好，但要不砍掉搜狗。
南无月 发表于 2024-3-23 21:52
就在这个页面按了一下，看了。。没叉啥的。。
他有控制台啥的，就那个
马黑黑 发表于 2024-3-23 21:54
腾讯有个特点，就是谁做的东东好了，就买下来。比方说腾讯做输入法，叫QQ输入法，做的不咋地，但它看上了 ...
把搜狗整 过去还是要把Q输入法整好啊。。
搜狗还真是身不由己啊。。
腾讯对搜狗厚道还挺好，不用后悔{:4_170:}
南无月 发表于 2024-3-23 21:59
把搜狗整 过去还是要把Q输入法整好啊。。
搜狗还真是身不由己啊。。
腾讯对搜狗厚道还挺好，不用后悔{: ...
各自独立存在。不过你看QQ输入法的一些深层次的东东，你就知道，搜狗的很多东东搬过去了
马黑黑 发表于 2024-3-23 21:55
他有控制台啥的，就那个
此页面处于准标准模式，排版布局可能会受到影响。若需要标准模式，请使用“<!DOCTYPE html>”。
指向“http://pc1.gtimg.com/js/jquery-1.4.4.min.js”的 <script> 加载失败。
点了，查看器，控制台。。等等。。。
出现三排字，一次复制出来只有一排
南无月 发表于 2024-3-23 22:00
此页面处于准标准模式，排版布局可能会受到影响。若需要标准模式，请使用“”。
指向“http://pc1.gtimg ...
点控制台就是查看JS等代码有木有错误的
马黑黑 发表于 2024-3-23 22:00
各自独立存在。不过你看QQ输入法的一些深层次的东东，你就知道，搜狗的很多东东搬过去了
我是用搜狗，可没用Q输入，没法比。。听你说说就行了。。
马黑黑 发表于 2024-3-23 22:03
点控制台就是查看JS等代码有木有错误的
{:4_173:}网页的记错小本本。。
南无月 发表于 2024-3-23 22:21
网页的记错小本本。。
不仅如此的
南无月 发表于 2024-3-23 22:20
我是用搜狗，可没用Q输入，没法比。。听你说说就行了。。
QQ输入法之前还行，最近有弄广告了，弄的很隐蔽
马黑黑 发表于 2024-3-23 23:07
不仅如此的
{:4_173:}好吧，别的功能更有待发现
马黑黑 发表于 2024-3-23 23:07
QQ输入法之前还行，最近有弄广告了，弄的很隐蔽
点击率就是广告收入。。我严重怀疑靠点击的小游戏，背后其实都是广告
{:4_187:}
{:4_187:}
{:4_204:}
{:4_174:}
{:4_199:}
{:4_199:}