效果
图片要求
小图125px125px
大图750px500px
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕快乐宝贝子~</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg.jpg);
}
ul {
list-style: none;
}
li {
width: 125px;
height: 125px;
border: 5px solid #fff;
position: absolute;
left: -135px;
top: -135px;
/* 过渡 属性 执行时间 运动方式 延迟时间*/
transition: all 2s ease;
}
li span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #f00;
/* background: url(img/1.jpg) 0 0 no-repeat; */
opacity: 0;
}
#next{
width: 40px;
height: 80px;
background: #fff url(img/next.png) center center no-repeat;
position: absolute;
right:0;
top:50%;
/* 挪元素高度的一半 */
/* 已知高度 */
/* margin-top:-40px; */
/* 未知高度 translateY负元素高度的一半 */
transform:translateY(-50%);
border-radius: 5px 0 0 5px;
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<img src="img/thumbs/1.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/2.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/3.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/4.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/5.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/6.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/7.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/8.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/9.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/10.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/11.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/12.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/13.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/14.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/15.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/16.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/17.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/18.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/19.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/20.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/21.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/22.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/23.jpg" alt="">
<span></span>
</li>
<li>
<img src="img/thumbs/24.jpg" alt="">
<span></span>
</li>
</ul>
<div id="next">
</div>
<script>
// 1获取到所有li
var aLi = document.getElementsByTagName('li');
var nextBtn = document.getElementById('next');
var liHeight = aLi[0].offsetHeight;
var liWidth = aLi[0].offsetWidth;
// 获取屏幕高度和宽度
var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 计算垂直方向空隙的值
var spaceY = (screenHeight - 4 * liHeight) / 5;
// 计算水平方向空隙的值
var spaceX = (screenWidth - 6 * liWidth) / 7;
// 合并后左边和上边的空隙值
var spaceLeft = (screenWidth - 6 * 127) / 2;
var spaceTop = (screenHeight - 4 * 127) / 2;
// 记录打开ture|合并false的状态
var flag = true;
// 记录当前显示图片的索引
var iNow = 0;
for (var i = 0; i < aLi.length; i++) {
//根据索引推断所在行 Math.floor(i/6)+1
// 0-5 1
// 6-11 2
// 12-17 3
// 根据索引推断所在列
// i%6 + 1
// 0 6 12 18 1
// 1 7 13 19 2
// 设置transiton延迟时间 0-23
aLi[i].style.transitionDelay = (23 - i) * 100 + "ms";
aLi[i].row = Math.floor(i / 6) + 1;
aLi[i].col = i % 6 + 1;
// 给每一个li添加索引
aLi[i].index = i;
/*
行 top
1 1*spaceY
2 2*spaceY + 1*liHeight
3 3*spaceY + 2*liHeight
n n*spaceY + (n-1)*liHeight
列 left
1 1*spaceX
2 2*spaceX + 1liWidth
3 3*spaceX + 2liWidth
n n*spaceX + (n-1)liWidth
*/
var row = aLi[i].row;
var col = aLi[i].col;
// 设置每个li的left top 和旋转角度
aLi[i].style.top = row * spaceY + (row - 1) * liHeight + "px";
aLi[i].style.left = col * spaceX + (col - 1) * liWidth + "px";
aLi[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
// 点击事件 = 函数(*不是函数的调用)
aLi[i].onclick = fn;
}
function fn() {
if (flag) { //如果flag为true 那么当前是散开的状态 ->设置成合并操作
// 将所有li合并
for (var i = 0; i < aLi.length; i++) {
// 将所有li的延迟时间去掉
aLi[i].style.transitionDelay = "0ms";
// 合并
// 修改元素的边框为1px
aLi[i].style.borderWidth = "1px";
aLi[i].style.left = spaceLeft + (aLi[i].col - 1) * 127 + "px";
aLi[i].style.top = spaceTop + (aLi[i].row - 1) * 127 + "px";
aLi[i].style.transform = "rotate(0deg)";
// 获取li中的span
var oSpan = aLi[i].getElementsByTagName('span')[0];
oSpan.style.opacity = 1;
// 如果点击的li的索引 this.index ->显示哪个大图
var num = this.index + 1;
var left = -(aLi[i].col - 1) * 125;
var top = -(aLi[i].row - 1) * 125;
oSpan.style.background = "url(img/" + num + ".jpg) " + left + "px " + top + "px no-repeat";
// oSpan.style.background = "url(img/"+(this.index+1)+".jpg) "+(-(col-1)*125)+"px "+(-(row-1)*125)+"px no-repeat";
}
// 讲按钮显示
nextBtn.style.display = "block";
// 将当前显示图片的索引存在iNow
iNow = this.index;
console.log(iNow)
} else {
// 散开
for (var i = 0; i < aLi.length; i++) {
// 设置每个li的left top 和旋转角度
aLi[i].style.top = aLi[i].row * spaceY + (aLi[i].row - 1) * liHeight + "px";
aLi[i].style.left = aLi[i].col * spaceX + (aLi[i].col - 1) * liWidth + "px";
aLi[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
aLi[i].style.borderWidth = "5px";
var oSpan = aLi[i].getElementsByTagName('span')[0];
oSpan.style.opacity = "0";
}
nextBtn.style.display = "none";
}
flag = !flag;
}
// 按钮绑定点击事件
nextBtn.onclick = function(){
iNow++; //iNow记录索引 0-
if(iNow == aLi.length){
iNow = 0;
}
// console.log(iNow)
for(var i=0; i<aLi.length; i++){
var oSpan = aLi[i].getElementsByTagName('span')[0];
oSpan.style.transitionDelay = Math.random()*500 +"ms";
oSpan.style.backgroundImage ="url(img/"+(iNow+1)+".jpg)";
}
}
</script>
</body>
</html>