|
|

楼主 |
发表于 2022-10-29 09:28
|
显示全部楼层
代码我只做少量改动:
- <style type="text/css">
- #vWindow {
- width:500px;
- height:1000px;
- border:thick brown ridge;
- margin: 12px auto;
- background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
- background-position: -1px -1px;
- background-size:cover;
- }
- .itemy {
- width:500px;
- height:50px;
- background-position: 0 calc(var(--index) * 5%);
- background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
- background-size:500px 1000px;
- transform-origin: 0% 100%;
- }
- </style>
- <div id="vWindow"></div>
- <script type="text/javascript">
- (function() {
- let imgSet = [
- "https://s3.bmp.ovh/imgs/2022/10/26/921786027c7d70d4.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/7844960c1ea5cb20.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/5bca2b145ed6ff2a.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/452e0fe3064cb2c5.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/ae116f757cd90358.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/cce6012c9e8d5ba2.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/1179ef54c304895d.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/191afd745ff4c5b3.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/ea2f9003982d031b.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/6fa0aa5ece82295c.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/97b282a86f0c8226.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/de6f8b1503a0a9b2.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/f94be16fa70aa90e.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/26/736bbe28a8fd41be.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/25/5a9df07037122f0c.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/25/40461b7a1cd6c6d3.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/25/7a489ea1bda4aab1.jpg",
- "https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg"
- ];
- var Keyframes = [
- [{transform: 'rotateX(90deg)', opacity: '0.3' }, {offset:0.5, transform: 'rotateX(0deg)', opacity: '1' }],
- [{opacity: '0' }, {opacity: '1'}]
- ];
- var EffectTiming = { duration: 8000, fill: 'forwards'};
- var imgIdx = 0, lastIdx = imgSet.length - 1;
- var items = new Array(), aniObj = new Array();
- var vWindow = document.getElementById('vWindow');
- for (i = 0; i < 1000; i+=50) {
- let itemy = document.createElement('div');
- itemy.style.setProperty('--index',parseInt(i / 50));
- items.push(itemy);
- itemy.classList.add('itemy');
- vWindow.appendChild(itemy)
- }
-
- let chg_cur_pic = () => {
- for (i = 0; i < items.length; i++) {
- items[i].style.backgroundImage = "url(" + imgSet[imgIdx] + ")"
- }
- vWindow.style.backgroundImage = "url(" + imgSet[lastIdx] + ")";
-
- lastIdx = imgIdx;
- imgIdx++;
- imgIdx %= imgSet.length;
- for (j = 0; j < items.length; j++) {
- aniObj[j].play()
- }
- };
-
- for (j = 0; j < items.length; j++) {
- items[j].style.backgroundImage = "url(" + imgSet[lastIdx] + ")";
- aniObj[j] = items[j].animate(Keyframes[0], EffectTiming);
- }
- aniObj[items.length - 1].addEventListener('finish', chg_cur_pic);
- })();
- </script>
复制代码
|
|