我正在尝试通过示例学习 Javascript。我一直在使用一个脚本示例，如果在网上找到它，它会创建一个 3x3 幻灯片拼图。我已经能够添加一些功能和花里胡哨的东西，但我仍然坚持我认为很容易的事情。一旦用户解决了这个谜题，我的脚本就会调用函数 solvedIt() 来显示完整的谜题。我想要做的是用 3 个不同的图像替换中间一行的 3 个图块并进行平滑过渡。我可以简单地替换 src，但即使在阅读了很多关于转换图像的其他帖子之后，我仍然卡住了。似乎有两种方法可以解决我的问题。一种是以某种方式使用和更改每个图块的 css 类。另一种方法是通过使用它们的 id 以某种方式将第二个图像放在第一个图像上，然后调用一个 css 函数来为变化设置动画。我想在没有任何库的情况下解决这个问题。以下是我所拥有的代码的摘录：
html
<body>
<div>id="board"></div>
</body>
css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #0c67ae;
}
#board {
width: 360px;
height: 360px;
background-color: lightblue;
border: 10px solid #0c67ae;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#board img {
width: 118px;
height: 118px;
border: 1px solid #0c67ae;
}
var rows = 3;
var columns = 3;
var currTile;
var otherTile; //blank tile
// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
var imgOrder = ["4", "1", "3", "7", "2", "5", "8", "6", "9"];
window.onload = function() {
for (let r=0; r < rows; r++) {
for (let c=0; c < columns; c++) {
//<img id="0-0" src="1.jpg">
let tile = document.createElement("img");
tile.id = r.toString() + "-" + c.toString();
tile.src = "./" + src_dir + "/" + imgOrder.shift() + ".jpg";
//DRAG FUNCTIONALITY
tile.addEventListener("dragstart", dragStart); //click an image to drag
tile.addEventListener("dragover", dragOver); //moving image around while clicked
tile.addEventListener("dragenter", dragEnter); //dragging image onto another one
tile.addEventListener("dragleave", dragLeave); //dragged image leaving anohter image
tile.addEventListener("drop", dragDrop); //drag an image over another image, drop the image
tile.addEventListener("dragend", dragEnd); //after drag drop, swap the two tiles
// added mouse click handlers
tile.addEventListener("click", mouseClick); //
document.getElementById("board").append(tile);
}
}
} // end window.onload
function solvedIt() {
// replace 4.jpg, 5.jpg and 6.jpg with code1.jpg, code2.jpg and code3.jpg
// 4.jpg has id of '1-0', 5.jpg id='1-1' and 6.jpg='1-2'
let xTile = document.getElementById('1-0');
xTile.src="./"+src_dir+"/code1.jpg" ;
let xTile = document.getElementById('1-1');
xTile.src="./"+src_dir+"/code2.jpg" ;
let xTile = document.getElementById('1-2');
xTile.sr
}