图片出场的模板

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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[last].style.cssText = 'transform: translate(0,0) rotate(0) scale(1); opacity: 0';
pieces[key].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[key]; 最好再加一句 item.alt = '';
      papa.appendChild(item);
});

修改后完整代码如下：

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