《国色天香》（学习黑黑《竹间语》代码效果）

马黑黑

红影 发表于 2024-6-24 16:52
有点中奖的感觉呢

恭喜

红影

马黑黑 发表于 2024-6-24 19:08
如果弄懂了，就不要再忘记

不行啊，我去试过了，连小图都给弄没了。道理虽然知道了，具体一弄就废了
试不出来啊

红影

马黑黑 发表于 2024-6-24 19:08
如果弄懂了，就不要再忘记

我去看了那个文本转场效果的帖子，虽然那个是文字这个是图片，也有可借鉴的
那个是 idx = (idx + 1) % (txtAr.length - 1); 然后showText();  
看了那个，我觉得我可能把放的地方弄错了，var idx = 0;放的地方对的，放最外面了，后面两句我可能放错了。

马黑黑

红影 发表于 2024-6-24 19:31
我去看了那个文本转场效果的帖子，虽然那个是文字这个是图片，也有可借鉴的
那个是 idx = (idx + 1) % ( ...

慢慢研究

马黑黑

红影 发表于 2024-6-24 19:18
不行啊，我去试过了，连小图都给弄没了。道理虽然知道了，具体一弄就废了
试不出来啊

原因是组织代码还不上手。

函数 showPic() 是图片出场函数，红色那句，idx 声明改在函数之外，是个全局变量：let idx = 0;

const showPic = () => {
        let idx = Math.floor(Math.random() * pics.length);
        let w1 = tz.offsetWidth, h1 = tz.offsetHeight, w2 = ar[idx][1], h2 = ar[idx][2];
        let x = picbox.offsetWidth;
        picbox.src = ar[idx][0];
          const kfs = [
                {left: `-${x}px`, top: `150px`},
                {left: `${(w1 - w2) / 2}px`, top: `150px`, transform: `rotateY(0)`, offset: 0.1},
                {transform: `rotateY(-25deg)`},
                {transform: `rotateY(0)`},
                {transform: `skewX(5deg)`},
                {transform: `skewX(-3deg)`},
                {transform: `scale(1.05)`},
                {transform: `scale(0.95)`},
                {transform: `rotateY(25deg)`},
                {left: `${(w1 - w2) / 2}px`, top: `150px`, transform: `rotateY(0)`, offset: 0.9},
                {left: `${x + w1}px`, top: `150px`,  transform: `rotateY(-180deg) scale(0.9)`},
        ];
        ani = picbox.animate(kfs, 10000);
        ani.onfinish = () => showPic();
};

然后，红色那句删掉，在蓝色那句后面加一行，补上如下语句：

idx = (idx+1) % pics.length;

就这么简单！

绿叶清舟

国色天香原来影

红影

梦江南 发表于 2024-6-24 17:07
您已经很厉害了！佩服！

我只是跟在后面学啊，有什么可厉害的

红影

梦油 发表于 2024-6-24 17:09
她们的身段真美。

我找到几张大图，很多美女剪影，从里面挖了几张

红影

起个网名好难 发表于 2024-6-24 17:39
把美女变作片片也要一番功夫

这个简单，从一张大图里挖出来的

红影

樵歌 发表于 2024-6-24 18:52
但没有点艺术细胞是做不出美的效果的

想做就能出来呢，他们会ps的做出来更漂亮呢

红影

马黑黑 发表于 2024-6-24 19:08
如果弄懂了，就不要再忘记

嗯嗯，这些不敢忘记了

红影

马黑黑 发表于 2024-6-24 19:11
这也正常

已经把多余的删掉了

红影

马黑黑 发表于 2024-6-24 19:12
恭喜

谢谢，不管怎么说都是欣喜的

红影

马黑黑 发表于 2024-6-24 20:52
慢慢研究

在本地试成了，在这里的还没改

红影

马黑黑 发表于 2024-6-24 21:00
原因是组织代码还不上手。

函数 showPic() 是图片出场函数，红色那句，idx 声明改在函数之外，是个全 ...

我开始用idx = (idx+1) % pics.length;去替代idx = Math.floor(Math.random() * pics.length); ，没去掉前面的let ,其实只要去掉了就可以了

红影

绿叶清舟 发表于 2024-6-24 21:46
国色天香原来影

哈哈，看到清舟的回复，忍不住笑喷

起个网名好难

红影 发表于 2024-6-25 14:35
这个简单，从一张大图里挖出来的

大图会不会疼

樵歌

红影 发表于 2024-6-25 14:36
想做就能出来呢，他们会ps的做出来更漂亮呢

PS到底有底图什么的，这用代码做出来怕是更是无中生有，更不容易的。

梦油

红影 发表于 2024-6-25 14:35
我找到几张大图，很多美女剪影，从里面挖了几张

你的抠图技术真不错。

马黑黑

红影 发表于 2024-6-25 14:37
谢谢，不管怎么说都是欣喜的

欣喜挺好的