马黑黑 发表于 2022-7-7 21:30

图片出场的模板

<style>
#papa {
        left: -214px; /*margin: 50px auto 0;*/
        width: 1024px;
        height: 600px;
        border: 1px solid;
        overflow: hidden;
        position: relative;
}
.piece {
        position: absolute;
        width: 160px;
        height: 200px;
        left: -160px;
        top: 0;
        background: #e2e2e2;
        transition: all 4s;
}
@keyframes fly {
        to { left: 40%; top: 40%; }
}
</style>

<div id="papa"></div>

<script>

let pNum = 6, last; //pNum : 小块总数 last : 上一个出场
let gNum = (x, y) => Math.floor(Math.random() * (y-x+1)) + x; //取两数间整数随机数

Array.from({length:pNum}).forEach((item,key) => {
        item = document.createElement('span');
        item.className = 'piece';
        item.innerText = key;
        papa.appendChild(item);
});

setTimeout(in_out, 1000);

function in_out() {
        let pieces = document.querySelectorAll('.piece');
        let key = gNum(0, pieces.length - 1);
        if(key == last) key = last + 1; //避免重合
        if(key > pieces.length - 1) key = 0;
        if(last >= 0) pieces.style.cssText = 'transform: translate(0,0) rotate(0) scale(1); opacity: 0';
        pieces.style.cssText = 'transform: translate(592px, 200px) rotate(1turn) scale(2.5); opacity: 1';
        last = key;
        setTimeout(in_out, 10000);
}

</script>

马黑黑 发表于 2022-7-7 21:30

本帖最后由 马黑黑 于 2022-7-7 21:32 编辑

刚刚写好，源码如下：
<style>
#papa {
        left: -214px;/*margin: 50px auto 0;*/
        width: 1024px;
        height: 600px;
        border: 1px solid;
        overflow: hidden;
        position: relative;
}
.piece {
        position: absolute;
        width: 160px;
        height: 200px;
        left: -160px;
        top: 0;
        background: #e2e2e2;
        transition: all 4s;
}
@keyframes fly {
        to { left: 40%; top: 40%; }
}
</style>

<div id="papa"></div>

<script>

let pNum = 6, last; //pNum : 小块总数 last : 上一个出场
let gNum = (x, y) => Math.floor(Math.random() * (y-x+1)) + x; //取两数间整数随机数

Array.from({length:pNum}).forEach((item,key) => {
        item = document.createElement('span');
        item.className = 'piece';
        item.innerText = key;
        papa.appendChild(item);
});

setTimeout(in_out, 1000);

function in_out() {
        let pieces = document.querySelectorAll('.piece');
        let key = gNum(0, pieces.length - 1);
        if(key == last) key = last + 1; //避免重合
        if(key > pieces.length - 1) key = 0;
        if(last >= 0) pieces.style.cssText = 'transform: translate(0,0) rotate(0) scale(1); opacity: 0';
        pieces.style.cssText = 'transform: translate(592px, 200px) rotate(1turn) scale(2.5); opacity: 1';
        last = key;
        setTimeout(in_out, 10000);
}

</script>



马黑黑 发表于 2022-7-7 21:30

本帖最后由 马黑黑 于 2022-7-7 21:53 编辑

一楼演示并未用到图片，是使用了 span 标签模拟图片元素。如果使用图片，需要：

一、建立一个数组装载图片地址

let picAr = [
    '地址一',
    '地址二',
    '地址N'
];

以上声明要放在

    let pNum = 6, last; //pNum : 小块总数 last : 上一个出场

之前，且把上一句的 6 改为 picAr.length，即整句是， let pNum = picAr.length, last;
以上修改后，完整代码如下：

let picAr = [
    '地址一',
    '地址二',
    '地址N'
];
let pNum = picAr.length, last;

二、下面这组JS代码，红色部分都要改：

Array.from({length:pNum}).forEach((item,key) => {
      item = document.createElement('span'); //改为 img
      item.className = 'piece';
      item.innerText = key; // 整句改为 item.src = picAr; 最好再加一句 item.alt = '';
      papa.appendChild(item);
});



修改后完整代码如下：


Array.from({length:pNum}).forEach((item,key) => {
      item = document.createElement('span');
      item.className = 'piece';
       item.src = picAr;
      item.alt = '';
      papa.appendChild(item);
});


绿叶清舟 发表于 2022-7-7 21:51

又来新的了

马黑黑 发表于 2022-7-7 21:53

绿叶清舟 发表于 2022-7-7 21:51
又来新的了

这个刚琢磨出来

红影 发表于 2022-7-7 21:55

关键是 let pNum = 6, last;吧？

绿叶清舟 发表于 2022-7-7 21:56

马黑黑 发表于 2022-7-7 21:53
这个刚琢磨出来

看上面数字，1、2、5这么出来的

马黑黑 发表于 2022-7-7 21:58

绿叶清舟 发表于 2022-7-7 21:56
看上面数字，1、2、5这么出来的

随机的，没啥顺序

马黑黑 发表于 2022-7-7 22:00

红影 发表于 2022-7-7 21:55
关键是 let pNum = 6, last;吧？

这个是多少个出场的元素。若果使用了图片，就需要数组装载图片地址(假设变量是 picAr），这时候，你说的这句要放在数组声明的后面，然后把那句改为：

let pNum = picAr.length, last;

详情请看三楼

绿叶清舟 发表于 2022-7-7 22:12

马黑黑 发表于 2022-7-7 21:58
随机的，没啥顺序

搞个打群架的{:4_189:}

马黑黑 发表于 2022-7-7 22:15

绿叶清舟 发表于 2022-7-7 22:12
搞个打群架的

差不多

加林森 发表于 2022-7-7 22:15

明天见{:5_110:}

马黑黑 发表于 2022-7-7 22:16

加林森 发表于 2022-7-7 22:15
明天见

88

加林森 发表于 2022-7-7 22:17

马黑黑 发表于 2022-7-7 22:16
88

谢谢！

马黑黑 发表于 2022-7-8 07:34

加林森 发表于 2022-7-7 22:15
明天见

一个应用实例:

https://www.huachaowang.com/forum.php?mod=viewthread&tid=60999&extra=page%3D1

加林森 发表于 2022-7-8 08:32

老黑上午好！

马黑黑 发表于 2022-7-8 12:12

加林森 发表于 2022-7-8 08:32
老黑上午好！

中午好

加林森 发表于 2022-7-8 14:39

马黑黑 发表于 2022-7-8 12:12
中午好

下午好！

红影 发表于 2022-7-8 16:00

马黑黑 发表于 2022-7-7 22:00
这个是多少个出场的元素。若果使用了图片，就需要数组装载图片地址(假设变量是 picAr），这时候，你说的 ...

嗯嗯，这个好玩{:4_187:}

马黑黑 发表于 2022-7-8 19:17

红影 发表于 2022-7-8 16:00
嗯嗯，这个好玩

还行
页: [1] 2
查看完整版本: 图片出场的模板