图图专用帖

马黑黑

起个网名好难 发表于 2022-10-29 09:26
我就是通不过，只能看到一个框

代码我只做少量改动：

1. <style type="text/css">
   
2.         #vWindow        {
   
3.                 width:500px;
   
4.                 height:1000px;
   
5.                 border:thick brown ridge;
   
6.                 margin: 12px auto;
   
7.                 background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
   
8.                 background-position: -1px -1px;
   
9.                 background-size:cover;
   
10.         }
    
11.         .itemy        {
    
12.                 width:500px;
    
13.                 height:50px;
    
14.                 background-position: 0 calc(var(--index) * 5%);
    
15.                 background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
    
16.                 background-size:500px 1000px;
    
17.                 transform-origin: 0%  100%;
    
18.         }
    
19. </style>
    
20. 
    
21. <div id="vWindow"></div>
    
22. 
    
23. <script type="text/javascript">
    
24. (function() {
    
25. let imgSet = [
    
26. "https://s3.bmp.ovh/imgs/2022/10/26/921786027c7d70d4.jpg",
    
27. "https://s3.bmp.ovh/imgs/2022/10/26/7844960c1ea5cb20.jpg",
    
28. "https://s3.bmp.ovh/imgs/2022/10/26/5bca2b145ed6ff2a.jpg",
    
29. "https://s3.bmp.ovh/imgs/2022/10/26/452e0fe3064cb2c5.jpg",
    
30. "https://s3.bmp.ovh/imgs/2022/10/26/ae116f757cd90358.jpg",
    
31. "https://s3.bmp.ovh/imgs/2022/10/26/cce6012c9e8d5ba2.jpg",
    
32. "https://s3.bmp.ovh/imgs/2022/10/26/1179ef54c304895d.jpg",
    
33. "https://s3.bmp.ovh/imgs/2022/10/26/191afd745ff4c5b3.jpg",
    
34. "https://s3.bmp.ovh/imgs/2022/10/26/ea2f9003982d031b.jpg",
    
35. "https://s3.bmp.ovh/imgs/2022/10/26/6fa0aa5ece82295c.jpg",
    
36. "https://s3.bmp.ovh/imgs/2022/10/26/97b282a86f0c8226.jpg",
    
37. "https://s3.bmp.ovh/imgs/2022/10/26/de6f8b1503a0a9b2.jpg",
    
38. "https://s3.bmp.ovh/imgs/2022/10/26/f94be16fa70aa90e.jpg",
    
39. "https://s3.bmp.ovh/imgs/2022/10/26/736bbe28a8fd41be.jpg",
    
40. "https://s3.bmp.ovh/imgs/2022/10/25/5a9df07037122f0c.jpg",
    
41. "https://s3.bmp.ovh/imgs/2022/10/25/40461b7a1cd6c6d3.jpg",
    
42. "https://s3.bmp.ovh/imgs/2022/10/25/7a489ea1bda4aab1.jpg",
    
43. "https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg"
    
44. ];
    
45. 
    
46. var Keyframes = [
    
47.     [{transform: 'rotateX(90deg)', opacity: '0.3' }, {offset:0.5, transform: 'rotateX(0deg)', opacity: '1' }],
    
48.     [{opacity: '0' }, {opacity: '1'}]
    
49. ];
    
50. var EffectTiming = { duration: 8000,  fill: 'forwards'};
    
51. var imgIdx = 0,    lastIdx = imgSet.length - 1;
    
52. var items = new Array(), aniObj = new Array();
    
53. var vWindow = document.getElementById('vWindow');
    
54. 
    
55.     for (i = 0; i < 1000; i+=50) {
    
56.         let itemy = document.createElement('div');
    
57.                 itemy.style.setProperty('--index',parseInt(i / 50));
    
58.                 items.push(itemy);
    
59.         itemy.classList.add('itemy');
    
60.         vWindow.appendChild(itemy)
    
61.     }
    
62.       
    
63.         let chg_cur_pic = () => {
    
64.                 for (i = 0; i < items.length; i++) {
    
65.                         items[i].style.backgroundImage = "url(" + imgSet[imgIdx] + ")"
    
66.                 }
    
67.                 vWindow.style.backgroundImage = "url(" + imgSet[lastIdx] + ")";
    
68.                
    
69.                 lastIdx = imgIdx;
    
70.                 imgIdx++;
    
71.                 imgIdx %= imgSet.length;
    
72.                 for (j = 0; j < items.length; j++) {
    
73.                         aniObj[j].play()
    
74.                 }
    
75.         };      
    
76.       
    
77.     for (j = 0; j < items.length; j++) {
    
78.                 items[j].style.backgroundImage = "url(" + imgSet[lastIdx] + ")";
    
79.         aniObj[j] = items[j].animate(Keyframes[0], EffectTiming);
    
80.     }
    
81.     aniObj[items.length - 1].addEventListener('finish', chg_cur_pic);
    
82. })();
    
83. </script>

复制代码

起个网名好难

马黑黑 发表于 2022-10-29 09:28
代码我只做少量改动：

我也加了引号但还是一样的不行。

起个网名好难

马黑黑 发表于 2022-10-29 09:28
代码我只做少量改动：

我大概猜到原因了：草稿和发布了的帖子待遇不同。

https://www.huachaowang.com/foru ... 41&fromuid=7581

这还是原来的代码。

马黑黑

起个网名好难 发表于 2022-10-29 09:36
我大概猜到原因了：草稿和发布了的帖子待遇不同。

https://www.huachaowang.com/forum.php?mod=redire ...

这个我倒没注意过

起个网名好难

马黑黑 发表于 2022-10-29 11:16 这个我倒没注意过

草稿到现在还是这样的。

马黑黑

马黑黑

186楼测试可以表明——

本坛，使用 relative 定位的帖子父框，假设帖子的宽度为1200排序，则左定位实现方式为下面的两种方法之一：

① left: calc(50% - 681px);
② margin-left: calc(50% - 681px);

其中，calc() 函数是CSS计算函数，小括号里面的数字运算特别注意，必须在运算符两边留一个空格；百分比可以与其他带单位的数值进行运算，这很方便，例子中的 681 是这样：1200÷2+81，81则为帖子正文头像所在的左边栏宽度的一半。

马黑黑

&#9881;&#65039;

马黑黑

OK?

马黑黑

discuz! x3.2 使用 gbk字符集，

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

马黑黑

&#1758;

马黑黑

测试 ♥

马黑黑

游客，如果您要查看本帖隐藏内容请回复

山人

看看

马黑黑

马黑黑

nothing

马黑黑

马黑黑

马黑黑

3

2

1