思路:
首先预加载照片,分大图小图两个循环预加载函数,共48张图片,count记录循环次数,count==48时执行loadSuccess()中代码。
先让照片显示在div中,然后定位隐藏在左上角,然后计算每张图片应该在的位置,设置其left和top。使用transition语法让他们动态显示,并且设置不同的延迟时间TransitionDelay让他们一张一张显示,并且有一个随机角度(循环用双层循环,因为分为行和列)。
1)在div中加入span,存放定位的大图(初始隐藏),
点击某一图片时,div边框大小改变,取消随机角度,重新计算left和top并设置给div,所有span(不同定位)组成当前图片的大图并显示,显示上一个和下一个按钮(记录点击图片的索引,以实现上一个和下一个功能)。
2)
隐藏span,恢复边框、随机角度、展开时的top和left值,取消TransitionDelay(展开时没有延迟)。
在这个点击事件中,需要判断当前状态图片是展开还是合并,var flag = true用
flag记录(true是打开)最后flag = !flag;
取反。如果打开的,则合并执行
1);else则打开执行
2)。
上一个和下一个功能:轮播图原理,增加一个随机延迟时间来更换图片的动画(TransitionDelay = Math.random() * 500 + 'ms')。
ps:小图125*125 大图750*500
图片网盘
蛋糕网盘 https://pan.baidu.com/s/14xTrLklWHpD_NCo7uTVfCA
也可以替换成这个蛋糕图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%; /*该元素及其父元素和html、body都设置100% 才能全屏效果*/
background: #999;
}
.img {
width: 125px;
height: 125px;
border: 5px solid #fff;
position: absolute; /*定位后修改left、top值才会生效*/
left: -135px; /*初始隐藏在左上角*/
top: -135px;
-webkit-transition: all 1.5s ease 1s; /*值改变时才生效*/
}
.span {
opacity: 0;
background: red;
width: 125px;
height: 125px;
display: block;
}
#prev, #next {
width: 40px;
height: 80px;
position: absolute;
top: 50%;
margin-top: -40px;
display: none;
}
#prev {
background: #fff url("img/prev.png") center center no-repeat;
left: 0;
border-radius: 0px 10px 10px 0;
}
#next {
background: #fff url("img/next.png") center center no-repeat;
right: 0;
border-radius: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<span id="prev"></span>
<span id="next"></span>
<script>
var oContainer = document.getElementById('container');
var oNext = document.getElementById('next');
var oPrev = document.getElementById('prev');
var count = 0;/*计数 48*/
for (var i = 0; i < 24; i++) {
var oImg = new Image();
oImg.onload = function () {/*预加载*/
count++;/*总共四十八张图*/
if (count == 48) {/*如果加载完成 执行函数*/
loadSuccess();
}
};
oImg.src = 'img/thumbs/' + (i + 1) + '.jpg';/*小图*/
/*src写在下面 解决ie6不好用问题*/
}
for (var i = 0; i < 24; i++) {
var oImg = new Image();
oImg.onload = function () {
count++;
if (count == 48) {
loadSuccess();
}
};
oImg.src = 'img/' + (i + 1) + '.jpg';
}
var index = 0;/*计数 循环24次*/
function loadSuccess() {
for (var i = 0; i < 4; i++) { //行/*双层for循环 外层行 里层列*/
for (j = 0; j < 6; j++) { //列
index++;/*1-24*/
var oDiv = document.createElement('div');/*创建一个元素 class=‘img’ 放图片*/
oDiv.className = 'img';
oDiv.innerHTML = `<span class="span"></span>`;/*div中插入span(存放合并后的大图)*/
oDiv.row = i;/*自定义属性 行 列*/
oDiv.col = j;
oDiv.style.background = 'url(img/thumbs/' + index + '.jpg)';/*根据index插入图片*/
oDiv.index = index;/*把index设置为自定义属性 索引 1-24*/
oDiv.onclick = fn; /*点击事件*/
oContainer.appendChild(oDiv);/*注意位置在iSpaceXiSpaceY上*/
var iSpaceX = (oContainer.offsetWidth - 135 * 6) / 7;/*列空隙*/
var iSpaceY = (oContainer.offsetHeight - 135 * 4) / 5; /*行空隙*/
oDiv.style.webkitTransitionDelay = (24-index) * 100 + 'ms';/*动画延迟 最后一个先出来所以 24-index*/
oDiv.style.webkitTransform = 'rotate(' + (Math.random() - 0.5) * 40 + 'deg)'; /*随机角度 -20到20*/
oDiv.style.left = (oDiv.col + 1) * iSpaceX + oDiv.col * 135 + "px";
oDiv.style.top = (oDiv.row + 1) * iSpaceY + oDiv.row * 135 + "px";
/*第一张left 零个图片width一个空隙 列数*图片width+(列数+1)*空隙
* 第二张left 一个图片width两个空隙
* 。。。。。
* */
}
}
var iLeft = (oContainer.offsetWidth - 127 * 6) / 2;/*border变为1px 只有两个空隙 左右*/
var iTop = (oContainer.offsetHeight - 127 * 4) / 2;/*上下空隙*/
var aDiv=oContainer.getElementsByTagName('div');/*重新获取div 已经变成数组*/
var aSpan = oContainer.getElementsByTagName('span');/*重新获取span 数组*/
var flag = true;/*判断是否打开 true打开*/
var iNow = 0;/*记录当前索引*/
function fn() {/*点击事件 函数提升*/
for (i = 0; i < aDiv.length; i++) {
var oSpan = aDiv[i].getElementsByTagName('span')[0];/*[0]是让数组变成每一个元素*/
if (flag) {/*if是真(打开) 让他合并*/
aDiv[i].style.webkitTransitionDelay = '0ms';/*取消动画延迟*/
aDiv[i].style.webkitTransform = 'rotate(0deg)';/*取消随机角度*/
aDiv[i].style.left = aDiv[i].col * 127 + iLeft + "px";
aDiv[i].style.top = aDiv[i].row * 127 + iTop + "px";
aDiv[i].style.border = '1px solid #fff';/*修改border*/
oSpan.style.opacity = 1;/*显示span span存放定位的大图*/
/* var spanRow=-aDiv[i].row;*/
var posTop = -aDiv[i].row * 125;/*position-top*/
var posLeft = -aDiv[i].col * 125;/*position-left*/
oSpan.style.background = 'url(img/' + this.index + '.jpg)'
+ posLeft + 'px ' + posTop + 'px no-repeat';/*注意两个值之间空格*/
oNext.style.display = 'block';/*显示两个按钮*/
oPrev.style.display = 'block';
iNow = this.index;/*记录索引*/
} else {/*打开*/
aSpan[i].style.webkitTransitionDelay = '0ms';
aDiv[i].style.border = '5px solid #fff';
aDiv[i].style.webkitTransform = 'rotate(' + (Math.random() - 0.5) * 40 + 'deg)';
aDiv[i].style.left = (aDiv[i].col + 1) * iSpaceX + aDiv[i].col * 135 + "px";
aDiv[i].style.top = (aDiv[i].row + 1) * iSpaceY + aDiv[i].row * 135 + "px";
oSpan.style.opacity = 0;
oNext.style.display = 'none';
oPrev.style.display = 'none';
}
}
flag = !flag;/*取反*/
}
oNext.onclick = function () {/*下一个*/
iNow++;
if (iNow == aDiv.length+1) {
iNow = 1;
}
change(iNow);
};
oPrev.onclick = function () {
iNow--;
if (iNow == 0) {
iNow = aDiv.length;
}
change(iNow);
};
function change() {/*更换图片*/
for (i = 0; i < aSpan.length; i++) {
aSpan[i].style.webkitTransitionDelay = Math.random() * 500 + 'ms';/*随机延迟显示*/
aSpan[i].style.backgroundImage = 'url(img/' + iNow + '.jpg)';/*换图片*/
}
}
}
</script>
</body>
</html>