天仙配

也曾年轻 发表于 2026-2-27 14:08

本帖最后由也曾年轻于 2026-2-27 19:54 编辑 <br /><br />左右箭头前后翻页，鼠标点击启停音乐
<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root {--w:800px;--h:612px;--offsetX:0px;}
#oBlk {width:var(--w);height:var(--h);position:relative;overflow:hidden; transform: translateX(var(--offsetX));border-radius:12px;box-shadow:4px 4px 10px black;}
#pichold {height:var(--h);position:absolute;left:0px;top:0px;}
#pichold img {width:var(--w);height:var(--h);float:left;}
#canvas {position:absolute; left:400px; bottom:10px;z-index:100;}
</style>

<script>
</script>
<div id='oBlk'>
<div id="pichold"></div>
<canvas id="canvas" width='800' height='100'></canvas>
</div>
<script>
// https://mp.weixin.qq.com/s/cZJ1jpfaN2AwMAqQ23ig2g
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZOBA49ZQzpWYMb1BRyzDhokg1tSuO8Wsa4ToYdDx3sQVciatbicB5M7wA/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZPA6zgpQofuH2vbAJqicngJfhUm39GtXHOPJUCPB0QiceHmVftQAXUabg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZsibzYUqlco1wCcRtfxZMbfaQYr8ElyyHDFD0CL7XbPDt9QDe8zmMLGw/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZeCF3dcCcnzyDB8wvMJALaNITaKWlYtZAJnfb1dee5scLRBqUDgJ2sg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZpic8cyxm7TmZpWexZP1j8KmlmV4XKoXicP8zqCdXn2ph4uUH3EibAic4pQ/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZVSgGyfprw9e7ehuFQQ773icZcLXYM0kLnIf3lnjs0nNF96tA9fEmSeA/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZd9NGjgSEJc5edquYePaPwicSzIjyMIgXFy1ewofKyoH3lvlic7y9zwlg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZPLOu9n0OjyibSNuyuweq2aGic9Jh5YCJ91YxibBF6NHCA7huARycRLz6A/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZeRZpYuRFVkibDCWpwnRict2qquk9YFnKzBXAgVVye0hPMrhwK6LZcRibw/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZy9OAQzUpmsP4Am6dJ0mZaWEibyic0ic4gCkjvgCDiaF0KGKmAVXctDJoOw/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZgfRakdyqG7sbcC6rpzWaEBgiawzxuXTKI324xRiaD2RwmrF3c2I3Hdibw/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZv1HZ1XibLY8TIhvwhrOHJ490K2OZgrm1icmicL1MYbaNSEg2PkZOH9M6A/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZ09NN0AUKIopYJvUFvgYrNMmWJjKbNibuSKnuh6wWf10ZBhtge5ZsRtA/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/LUdOA4yXQKOhotMzXzPDkYl4iblBu4oOZ3fiaf1nGauxicz6WIuicc7xytkDXIc7NUACf2VfycGh9uZ0icynnrpTgYw/0",
];
let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
pichold.style.width = pics.length * wVal + 'px';
pics.forEach(pic => {
let imgObj = document.createElement('img');
imgObj.src = pic;
pichold.appendChild(imgObj);
});
let numPic = pichold.querySelectorAll('img');
/**
pichold.onmousedown = (ev) => {
let styleLeft = parseInt(pichold.style.left);
let sbOffsetWidth = parseInt(oBlk.offsetWidth);
let imgOffsetLeft = parseInt(pichold.offsetLeft);
if(ev.button === 0) {
if(styleLeft > ((1 - numPic.length) * sbOffsetWidth)) pichold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
else pichold.style.left = '0px';
}
else if(ev.button === 2) {
if(imgOffsetLeft === 0)pichold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
else pichold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
}

}
**/ window.addEventListener('keydown', function(ev) {
let styleLeft = parseInt(pichold.style.left);
let sbOffsetWidth = parseInt(oBlk.offsetWidth);
let imgOffsetLeft = parseInt(pichold.offsetLeft);
if(ev.code === 'ArrowDown' || ev.code === 'ArrowRight') {
if(styleLeft > ((1 - numPic.length) * sbOffsetWidth)) pichold.style.left = (imgOffsetLeft -= sbOffsetWidth) + 'px';
else pichold.style.left = '0px';
}
else if(ev.code === 'ArrowUp' || ev.code === 'ArrowLeft') {
if(imgOffsetLeft === 0)pichold.style.left = (1 - numPic.length) * sbOffsetWidth + 'px';
else pichold.style.left = (imgOffsetLeft += sbOffsetWidth) + 'px';
}
});

oBlk.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
const setElmCenter = (elm) => {
const parentE = elm.parentNode;
const rect = parentE.getBoundingClientRect();
const winCenter = window.innerWidth / 2;
const offsetX = winCenter - (rect.left + elm.offsetWidth / 2);
elm.style.setProperty('--offsetX', `${offsetX}px`);
}

setElmCenter(oBlk);
window.onresize = () => setElmCenter(oBlk);

const sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://i.uik.cc/down.php/eb0f81c01aaefc4e601bf6f8c0b39496.js";
//sf1.src = "script/lrcPlayerFrgD.js";

sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {

let playMusic = () => {
// 同步歌词播放
let opts = {
audioURL:"https://s2.cldisk.com/sv-w9/audio/b7/03/55/146fc9eeeafa64d57dcb49d5d4585a52/audio.mp3",
canvas: canvas,
};
return new lrcPlayerFrg(opts);

}
let lrcPlayer = playMusic();
let musicObj = lrcPlayer.getAudObj();

oBlk.addEventListener('click', () => {
if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
lrcPlayer.getAudContext().resume();
}
if (musicObj.paused) {
musicObj.play();
} else {
musicObj.pause();
}
});
}
</script>

杨帆发表于 2026-2-27 14:50

别出心裁的有声读物，谢谢年轻老师{:4_190:}

梦江南 发表于 2026-2-27 14:54

这个太好了，边看还好听。看不清价格了。{:4_187:}

霜染枫丹 发表于 2026-2-27 15:35

我在剧场看过王少舫演出的天仙配，这本连环画是第一次见到，很感谢也曾年轻的分享，还能听到歌曲，这形式真好！{:4_204:}{:4_190:}{:4_199:}

也曾年轻 发表于 2026-2-27 16:55

杨帆发表于 2026-2-27 14:50
别出心裁的有声读物，谢谢年轻老师

谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

也曾年轻 发表于 2026-2-27 16:55

梦江南发表于 2026-2-27 14:54
这个太好了，边看还好听。看不清价格了。

谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

也曾年轻 发表于 2026-2-27 16:55

霜染枫丹发表于 2026-2-27 15:35
我在剧场看过王少舫演出的天仙配，这本连环画是第一次见到，很感谢也曾年轻的分享，还能听到歌曲，这形式真 ...

谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

梦江南 发表于 2026-2-27 16:59

也曾年轻发表于 2026-2-27 16:55
谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

哦，原来如此啊。

也曾年轻 发表于 2026-2-27 18:40

梦江南发表于 2026-2-27 16:59
哦，原来如此啊。

要不然也不会放在那里{:5_102:}

梦江南 发表于 2026-2-27 18:56

也曾年轻发表于 2026-2-27 18:40
要不然也不会放在那里

没关系啊，反而有新意了。

未知名 发表于 2026-2-27 20:40

简直是挖空心思，创意无限，简直大妙了！点一万个赞不多吧{:4_205:}{:4_178:}

未知名 发表于 2026-2-27 20:41

能下载到手机吗？{:4_203:}

小辣椒 发表于 2026-2-27 21:37

老师这次制作更加厉害，小人书还加上了音乐和频谱{:4_178:}

也曾年轻 发表于 2026-2-27 21:50

未知名发表于 2026-2-27 20:40
简直是挖空心思，创意无限，简直大妙了！点一万个赞不多吧

谢谢欣赏支持！

也曾年轻 发表于 2026-2-27 21:58

未知名发表于 2026-2-27 20:41
能下载到手机吗？

没试过，一是手机屏幕小看不清，二是我的手机看不全整个画面

也曾年轻 发表于 2026-2-27 21:59

小辣椒发表于 2026-2-27 21:37
老师这次制作更加厉害，小人书还加上了音乐和频谱

谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

小辣椒 发表于 2026-2-27 22:02

也曾年轻发表于 2026-2-27 21:59
谢谢欣赏支持！

其实是为了遮住图片上的公众号字样

反正我是太佩服你这个大师了{:4_178:}

也曾年轻 发表于 2026-2-27 22:24

小辣椒发表于 2026-2-27 22:02
反正我是太佩服你这个大师了
https://img2.baidu.com/it/u=2835631526,2016620663&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=481

杨帆发表于 2026-2-27 22:34

本帖最后由杨帆于 2026-2-27 22:36 编辑

也曾年轻发表于 2026-2-27 16:55
谢谢欣赏支持！

其实是为了遮住图片上的公众号字样
“左右箭头前后翻页，鼠标点击启停音乐”

我这儿未显示箭头呀，只能“鼠标点击启停音乐”，不知其因

其实，原来的鼠标点击翻页效果也挺好{:4_172:}

也曾年轻 发表于 2026-2-28 09:36

杨帆发表于 2026-2-27 22:34
“左右箭头前后翻页，鼠标点击启停音乐”

我这儿未显示箭头呀，只能“鼠标点击启停音乐”，不知其因

哦，是我说得不清楚{:5_102:}

箭头是键盘上的上下左右四个键，并不是画面上有箭头。

本来用鼠标控制翻页确实够了，但这些图片上公众号标识太显眼就想到用频谱来遮盖，于是就有了控制音乐的问题，帖子主题是连环画就不打算另外添加控制对象，直接点击画面来控制启停音乐又会与翻页控制混淆，试过用双击来区分但效果不理想，所以干脆添加键盘来控制翻页。

页: [1] 2

花潮论坛's Archiver

天仙配