<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div div {
width: 30px
height: 30px
display: inline-block
border: 1px solid black
background-repeat: no-repeat
background-size: 300% 300%
}
#img1 {
background-position: top left
}
#img2 {
background-position: top
}
#img3 {
background-position: top right
}
#img4 {
background-position: center left
}
#img5 {
background-position: center
}
#img6 {
background-position: center right
}
#img7 {
background-position: bottom left
}
#img8 {
background-position: bottom
}
#img9 {
background-position: bottom right
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
<div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
</div>
<div>
<div id="img7"></div>
<div id="img8"></div>
<div id="img9"></div>
</div>
<button>next</button>
</body>
<script>
let arr = ["http://iconfont.alicdn.com/t/1522400286994.jpg@100h_100w.jpg", "http://iconfont.alicdn.com/t/1510710350863.png@100h_100w.jpg", "http://iconfont.alicdn.com/t/1553563063102.jpg@100h_100w.jpg"]
let num = 0
let imgFun = () => {
document.querySelectorAll("div div").forEach(item => {
item.style.backgroundImage = 'url(' + arr[num] + ')'
})
}
imgFun()
document.querySelector("button").onclick = () => {
if (num < arr.length - 1) {
num++
} else {
num = 0
}
imgFun()
}
</script>
</html>
请采纳
将多张照片合成一张的方法有很多种：1、幻灯片：新建一张空白的幻灯片，将几张照片都放进去，调整好位置后，点击文件、导出，将保存格式选为图片格式jpeg。
2、画图：在Windows自带的画图软件中，新建空白画纸，再将几张照片都放进去，调整好位置后，保存即可。
3、懒人、稿定设计：这两种在线设计网站，方式也是新建空白页面，然后自行拼图即可。
4、PS软件：用PS软件新建空白页面，然后把几张照片放在一起，导出成jpeg格式即可。
5、美图秀秀：美图秀秀有一个自带的拼图功能，很方便简单，但缺点是每一张图之间都会有白色的线条间隔。
介绍个教程给你 http://www.qqbob.com/qqkongjian/jiaocheng/1427.html 如果要制作互动类的拼图（拼图游戏）可以用Flash软件制作。 相关教程： http://www.apoints.com/web/flash/action/200811/55759.html欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）