可爱的小猴 --- 你能看到它吗？

起个网名好难

马黑黑 发表于 2022-10-28 23:15
各人手头的设备或方便使用的设备也不一样吧

嗯，或许吧。

有个问题请教下，一个帖子无论是在本地或是其它论坛都能正常显示但在花潮论坛其中的js代码就是不执行，何故？

马黑黑

起个网名好难 发表于 2022-10-28 23:18
嗯，或许吧。

有个问题请教下，一个帖子无论是在本地或是其它论坛都能正常显示但在花潮论坛其中的js代 ...

纯JS还是使用了框架？如果是后者，discuz!默认并不开启。如果是前者，会不会有变量或函数重名？你可以试一下闭包的方式运行。

起个网名好难

马黑黑 发表于 2022-10-28 23:36
纯JS还是使用了框架？如果是后者，discuz!默认并不开启。如果是前者，会不会有变量或函数重名？你可以试 ...

1. <style type="text/css">
   
2.         #vWindow        {
   
3.                 width:500px;
   
4.                 height:1000px;
   
5.                 border:thick brown ridge;
   
6.                 margin: 12px auto;
   
7.                 bbbackground-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.                 bbbackground-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-28 23:43
很简单的代码

这个，JS没有任何问题。看了下代码，CSS有一处写法不明白，07 和 15 行，像下面：

bbbackground-image:url(图片地址);

改为:

background-image: url('图片地址');

其中，对于在论坛发帖而言，CSS中的图片地址需要使用引号，否则会被解析为ubb图片，这是问题所在。

起个网名好难

马黑黑 发表于 2022-10-29 08:49
这个，JS没有任何问题。看了下代码，CSS有一处写法不明白，07 和 15 行，像下面：

bbbackground-imag ...

好的，谢谢指导。

一直是这样用，难道是这出的问题。

马黑黑

起个网名好难 发表于 2022-10-29 09:15
好的，谢谢指导。

一直是这样用，难道是这出的问题。

这个版本略低。我试过取消解析图片链接，貌似也不见得成功。

CSS中的链接，习惯上还是用引号的

起个网名好难

马黑黑 发表于 2022-10-29 08:49
这个，JS没有任何问题。看了下代码，CSS有一处写法不明白，07 和 15 行，像下面：

bbbackground-imag ...

依然如故，我都怀疑是不是论坛对WAAPI不友好导致的，几个类似帖子轮番上去试都一样结果。

马黑黑

起个网名好难 发表于 2022-10-29 09:19
依然如故，我都怀疑是不是论坛对WAAPI不友好导致的。

我测试了一下，你看看：

https://www.huachaowang.com/foru ... 07&fromuid=7130

起个网名好难

马黑黑 发表于 2022-10-29 09:21
我测试了一下，你看看：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=56 ...

感谢你的多次耐心回复指导！

对这论坛我还是有蛮多摸不透的地方。

马黑黑

起个网名好难 发表于 2022-10-29 09:40
感谢你的多次耐心回复指导！

对这论坛我还是有蛮多摸不透的地方。

环境有些让人一下子适应不过来

起个网名好难

马黑黑 发表于 2022-10-29 11:15
环境有些让人一下子适应不过来

是啊，我一般习惯是先做草稿，看得过眼了再发表，这帖就怎么也通不过草稿关。

马黑黑

起个网名好难 发表于 2022-10-29 11:18
是啊，我一般习惯是先做草稿，看得过眼了再发表，这帖就怎么也通不过草稿关。

有时运气就是差

起个网名好难

马黑黑 发表于 2022-10-29 11:21
有时运气就是差

真不是运气差，那草稿到今天已是三天了就是只显示个框。

马黑黑

起个网名好难 发表于 2022-10-29 12:03
真不是运气差，那草稿到今天已是三天了就是只显示个框。

一直不使用草稿，不太了解。

起个网名好难

马黑黑 发表于 2022-10-29 12:07
一直不使用草稿，不太了解。

用草稿只是为了发表后少些修改。

马黑黑

起个网名好难 发表于 2022-10-29 12:09
用草稿只是为了发表后少些修改。

微信呀短信呀什么的好像也都有草稿。草稿能让要发布的东东有个沉淀过程，也挺好

起个网名好难

马黑黑 发表于 2022-10-29 12:17
微信呀短信呀什么的好像也都有草稿。草稿能让要发布的东东有个沉淀过程，也挺好

微信、短信有草稿真不知道。

马黑黑

起个网名好难 发表于 2022-10-29 12:28
微信、短信有草稿真不知道。

输入了不发出就是草稿

起个网名好难

马黑黑 发表于 2022-10-29 12:39
输入了不发出就是草稿

但不能保存，一不小心就给删掉了。

大猫咪

能看到二楼的，很温馨的画面！