起个网名好难 发表于 2025-2-15 12:08

山水之间，松风明月，处处悠然

本帖最后由 起个网名好难 于 2025-2-15 12:45 编辑 <br /><br /><meta name="referrer" content="never" >
<style>
:root        {--w:480px;--h:640px;}
#oBlk        {width:1280px;height:calc(var(--h) + 60px);overflow:hidden;margin:90px auto 40px calc(50% - 721px); position:relative;border-radius:24px;box-shadow:4px 4px 10px black;}
#picHold img        {width:var(--w);height:var(--h);border-radius:50%;mask: radial-gradient(red, transparent);}
#picHold        {width:var(--w);height:var(--h);position:absolute;overflow:hidden;white-space: nowrap;font-size:0;z-index:99;margin-top:40px;margin-left:415px;}
#bjVid        {position:absolute; left:0; top:0;width:115%;z-index:1; left:0; bottom:0;}
#controlBox        {position:absolute; right:20px;bottom:10px;width:100px;z-index:100;}
</style>
<div id="oBlk">
        <video id="bjVid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b51b06fd5101.mp4" loop autoplay muted></video>
        <div id="picHold">
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMEJhPDlo6HCcTvLtw6pOiafr7V0oOibDDdwv1icr0UhpHIM27nmyb2JxdA/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMHXfdSIBvhNibWKeafIPVcoBnHZP6elhibgTWDkZR58yg6nu9icIYkq3tQ/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMbRqTJTVsC39bsMgeac5In7mpiaQpJJNOUvQeXZEW3z4SmYvqKeE1zGg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMPzu6VqgcAviaTh4VTQjcEYMhC0AJejLJAK0SsIibmeQIX3w7kgj0nqlw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMO2anuratZxsCVcpBXNUA2hCt1icLVdVKibxeyPbxXRrM69MXLCegbYkQ/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMRYXPcexWhWNxvZRicEugiccJxFH4hIoV9mYGWeT2yggfeAuf6bibhlSeg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMIPyaH3SKSiacMBQEtT05xoFt3MeRVpBwnsvqvHtUtf9TqHQYpIQuvlw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMNR58ku91QbRCLeJqSDickk6dPsqT5VDAXyPNX5O7FG1hXQeJ3r4CFRg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMg2lDGeKcWAsFuLYXaQZ34fol8mcSicAlETaW37EavLOiclAzT3MpDGcg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMXOSHxSJHlS260qZQmLKT43fjiaNqdJDEHdcndorRNgOOMpu3FcC8DAQ/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMp5pmNxLf9LRV4wibtyXumELJ2sfdRtVXWGwwmes9aglAI6Pp0lweSjw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMEQLkRtEsyTOzAW9OGZY2LfQZWT3v1fmEludpo5vN0ecjC7cA6BibMPA/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMBuTubq4uyibwt8FGgOPGX6Oqd0zQAg1WLarDYTrItBwKewcQ3W7ujlQ/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_png/kB3nSc9p1bu02mP4BhnadCDFy9B1YJicMricULmyQljgxOT88a5LAH1Ao3m0jFt3GdVAYO2mpClKrUQM34WicBuSA/640" alt="" />
        </div>
        <div id="controlBox">
                <svg viewbox="0 0 100 100" >
                        <path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
                </svg>
        </div>
        <audio id="bjMusic" src="https://music.163.com/song/media/outer/url?id=1908814894.mp3" loop autoplay />
</div>
<script>
        let pics = picHold.querySelectorAll('img'), timerID = null;
        let idx = 0, delta = 1, picWidth = picHold.clientWidth;
        let scrollPics = () => {
                        picHold.scroll({top: 0, left: (idx + delta) * picWidth , behavior: 'smooth'});
                        idx += delta;        idx %= pics.length;
        };
       
       
    const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
    const playPath = "M35 35 l30 15 -30 15 z";
        const musicObj = bjMusic;
       
playCtrl.onclick = () => musicObj.paused
        ? (musicObj.play(),playCtrl.setAttribute('d', pausePath))
        : (musicObj.pause(),playCtrl.setAttribute('d', playPath));
        musicObj.addEventListener('play', () => {playCtrl.setAttribute('d', pausePath); bjVid.play();timerID = setInterval( scrollPics ,5000);});
        musicObj.addEventListener('pause', () => {playCtrl.setAttribute('d', playPath), bjVid.pause(); clearInterval(timerID)});
</script>

红影 发表于 2025-2-15 14:19

背景是动态的，其中的图片也是移动的，有趣。
欣赏难难好帖{:4_187:}

杨帆 发表于 2025-2-15 15:26

漂亮！谢谢难难老师精彩分享{:4_191:}

起个网名好难 发表于 2025-2-15 15:42

红影 发表于 2025-2-15 14:19
背景是动态的，其中的图片也是移动的，有趣。
欣赏难难好帖

谢谢支持与欣赏！

起个网名好难 发表于 2025-2-15 15:42

杨帆 发表于 2025-2-15 15:26
漂亮！谢谢难难老师精彩分享

谢谢支持与欣赏！

梦江南 发表于 2025-2-15 16:05

这帖子就不会跑了，背景还是动态的。高！{:4_199:}

起个网名好难 发表于 2025-2-15 16:09

梦江南 发表于 2025-2-15 16:05
这帖子就不会跑了，背景还是动态的。高！

没看1#原先的代码不知道为什么会跑的。

小辣椒 发表于 2025-2-15 16:34

难难这个还加了播放器，{:4_199:}

小辣椒 发表于 2025-2-15 16:35

什么都难不到你，哈哈太赞了{:4_178:}

红影 发表于 2025-2-15 16:49

起个网名好难 发表于 2025-2-15 15:42
谢谢支持与欣赏！

问好难难，感谢带来的好帖{:4_187:}

起个网名好难 发表于 2025-2-15 16:49

小辣椒 发表于 2025-2-15 16:34
难难这个还加了播放器，

就怕浏览器不允许自动播放，它同时还控制着帖子里的其它动态效果。

起个网名好难 发表于 2025-2-15 16:50

小辣椒 发表于 2025-2-15 16:35
什么都难不到你，哈哈太赞了

谢谢支持与欣赏！

起个网名好难 发表于 2025-2-15 16:51

红影 发表于 2025-2-15 16:49
问好难难，感谢带来的好帖

太客气了，做帖本来就是个娱乐。

小辣椒 发表于 2025-2-15 17:03

起个网名好难 发表于 2025-2-15 16:49
就怕浏览器不允许自动播放，它同时还控制着帖子里的其它动态效果。

我可以的，可以自动播放，图片也是自动转换，动图也是可以停止，就是按钮要点击重一点，不够灵活

起个网名好难 发表于 2025-2-15 18:20

小辣椒 发表于 2025-2-15 17:03
我可以的，可以自动播放，图片也是自动转换，动图也是可以停止，就是按钮要点击重一点，不够灵活

点击须在红色范围内，如果偏了就起不到作用，应该还是灵活的。

小辣椒 发表于 2025-2-15 18:22

起个网名好难 发表于 2025-2-15 18:20
点击须在红色范围内，如果偏了就起不到作用，应该还是灵活的。

是的，哈哈我是没有点击到位{:4_189:}

樵歌 发表于 2025-2-15 19:33

集美之大成者！制作得太有创意了!高高手哦

起个网名好难 发表于 2025-2-15 19:37

樵歌 发表于 2025-2-15 19:33
集美之大成者！制作得太有创意了!高高手哦

谢谢支持与欣赏！

红影 发表于 2025-2-15 20:29

起个网名好难 发表于 2025-2-15 16:51
太客气了，做帖本来就是个娱乐。

难难想要的效果都能实现呢，厉害{:4_187:}

樵歌 发表于 2025-2-15 21:38

起个网名好难 发表于 2025-2-15 19:37
谢谢支持与欣赏！

您 做的帖子我最爱看了！
页: [1] 2
查看完整版本: 山水之间，松风明月，处处悠然