|
|
本帖最后由 马黑黑 于 2022-8-1 07:36 编辑
步骤一:先将图片写入数组 picAr,放在面板数组 let panelAr 的上方,
let picAr = [
'图片1',
'图片2',
'图片3',
'图片4',
'图片5',
'图片6',
];
步骤二:在写入魔方的代码处加入如下红色句子,用意是给面板添加背景图片,
panelAr.forEach((item,key) => {
let span = document.createElement('span');
span.className = 'panel';
span.style.background = 'url(' + picAr[key] + ') no-repeat center/cover';
span.style.transform = panelAr[key];
span.style.display = 'none';
wrapper.appendChild(span);
});
步骤三:在 mkBox() 函数那里,将红色的语句删除掉,用意是不用给面板着色:
function mkBox() {
step > 0 ? (spanAr[idx].style.display = 'block', mkMsg.innerText = '封') : (spanAr[idx].style.display = 'none', mkMsg.innerText = '碎');
spanAr[idx].style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
idx += step;
if(idx > spanAr.length - 1 || idx < 0) {
step = -step;
idx += step;
}
}
这样,叫前面的去随机数函数似乎也用不到了,确定后可以也应当将它删掉:
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
以上是用图片做魔方各面板背景的思路。另一个思路是改 span 标签为 img 标签,这里先不多说。
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|