今天給大家分享一款超炫的圖片排列特效。頁面加載時。圖片縱向堆疊在頁面中，當鼠標單擊toggle按鈕時，圖片依次展開。鋪滿整個網頁。效果圖如下：

在線預覽???源碼下載

實現的代碼。

html代碼：

<div class="t-container"><div class="t-content"><img class="t-img" src="img00.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img01.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img02.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img03.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img04.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img05.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img06.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img07.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img08.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img09.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img10.jpg"alt="" /><div class="cover"></div></div><div class="t-content"><img class="t-img" src="img11.jpg"alt="" /><div class="cover"></div></div></div><div class="container"><button type="button" class="btn btn-primary" id="toggle">Toggle</button></div>

css3代碼：

body{overflow: hidden;}canvas{width: 100%;height: 100%;}.t-container{position: absolute;top: 0;left: 0;}.t-container .t-content{position: absolute;top: 0;left: 0;width: 400px;height: 225px;}.t-container .t-content img{position: absolute;width: 400px;height: 225px;}.t-container .t-content .cover{position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.75);width: 400px;height: 225px;}.container{position: absolute;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);left: 50%;bottom: 50px;}.container .btn{z-index: 9999;}

js代碼：

function createGrid(transform, xx, yy, isHorizon) {var elemWidth, elemHeight;if (isHorizon) {elemWidth = window.innerWidth / 4;elemHeight = window.innerHeight / 3;} else {elemWidth = window.innerWidth / 3;elemHeight = window.innerHeight / 4;}var xPos = elemWidth * xx;var yPos = elemHeight * yy;var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };var targetTopLeft = { x: xPos, y: yPos };var targetTopRight = { x: xPos + elemWidth, y: yPos };var targetBotLeft = { x: xPos, y: yPos + elemHeight };var targetBotRight = { x: xPos + elemWidth, y: yPos + elemHeight };var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };function onUpdateGridHandler() {var tempTopLeftX = curTopLeft.x * curObject.rate + targetTopLeft.x * (1 - curObject.rate);var tempTopLeftY = curTopLeft.y * curObject.rate + targetTopLeft.y * (1 - curObject.rate);var tempTopRightX = curTopRight.x * curObject.rate + targetTopRight.x * (1 - curObject.rate);var tempTopRightY = curTopRight.y * curObject.rate + targetTopRight.y * (1 - curObject.rate);var tempBotLeftX = curBotLeft.x * curObject.rate + targetBotLeft.x * (1 - curObject.rate);var tempBotLeftY = curBotLeft.y * curObject.rate + targetBotLeft.y * (1 - curObject.rate);var tempBotRightX = curBotRight.x * curObject.rate + targetBotRight.x * (1 - curObject.rate);var tempBotRightY = curBotRight.y * curObject.rate + targetBotRight.y * (1 - curObject.rate);transform.topLeft.x = tempTopLeftX;transform.topLeft.y = tempTopLeftY;transform.topRight.x = tempTopRightX;transform.topRight.y = tempTopRightY;transform.bottomLeft.x = tempBotLeftX;transform.bottomLeft.y = tempBotLeftY;transform.bottomRight.x = tempBotRightX;transform.bottomRight.y = tempBotRightY;}function onUpdate0GridHandler() {var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);transform.topLeft.x = tempTopLeftX;transform.topLeft.y = tempTopLeftY;}function onUpdate1GridHandler() {var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);transform.topRight.x = tempTopRightX;transform.topRight.y = tempTopRightY;}function onUpdate2GridHandler() {var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);transform.bottomLeft.x = tempBotLeftX;transform.bottomLeft.y = tempBotLeftY;}function onUpdate3GridHandler() {var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);transform.bottomRight.x = tempBotRightX;transform.bottomRight.y = tempBotRightY;}TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power2.easeOut" });TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power4.easeOut" });TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });//console.log(transform)var cover = $(transform.element).find(".cover")[0]TweenLite.to(cover, .4, { opacity: 0, ease: "Power1.easeOut" });}function pileElement(transform, num, maxNumber) {var windowWidth = window.innerWidth;var windowHeight = window.innerHeight;// -----------------------------var camera = {focus: 400,self: {x: 0,y: 0,z: 0},rotate: {x: 0,y: 0,z: 0},up: {x: 0,y: 1,z: 0},zoom: 1,display: {x: width / 2,y: height / 2,z: 0}};// ================================var y = -10 * (num + 1) + window.innerHeight / 2 * .8;var width = 400;var height = 400 * 9 / 16;var topLeftPos = { x: -width / 2, z: -height };var topRightPos = { x: width / 2, z: -height };var botLeftPos = { x: -width / 2, z: 0 };var botRightPos = { x: width / 2, z: 0 };var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);var targetTopLeftX = topScale * topLeftPos.x;var targetTopLeftY = topScale * y;var targetTopRightX = topScale * topRightPos.x;var targetTopRightY = topScale * y;var targetBotLeftX = botScale * botLeftPos.x;var targetBotLeftY = botScale * y;var targetBotRightX = botScale * botRightPos.x;var targetBotRightY = botScale * y;var halfWidth = window.innerWidth / 2;var halfHeight = window.innerHeight / 2;// -------------------------------------- transform.topLeft.x = targetTopLeftX + halfWidth;transform.topLeft.y = targetTopLeftY + halfHeight;transform.topRight.x = targetTopRightX + halfWidth;transform.topRight.y = targetTopRightY + halfHeight;transform.bottomLeft.x = targetBotLeftX + halfWidth;transform.bottomLeft.y = targetBotLeftY + halfHeight;transform.bottomRight.x = targetBotRightX + halfWidth;transform.bottomRight.y = targetBotRightY + halfHeight;};function createPile(transform, num) {var windowWidth = window.innerWidth;var windowHeight = window.innerHeight;// -----------------------------var camera = {focus: 400,self: {x: 0,y: 0,z: 0},rotate: {x: 0,y: 0,z: 0},up: {x: 0,y: 1,z: 0},zoom: 1,display: {x: width / 2,y: height / 2,z: 0}};// ================================var halfWidth = window.innerWidth / 2;var halfHeight = window.innerHeight / 2;var y = -10 * (num + 1) + window.innerHeight / 2 * .8;var width = 400;var height = 400 * 9 / 16;var topLeftPos = { x: -width / 2, z: -height };var topRightPos = { x: width / 2, z: -height };var botLeftPos = { x: -width / 2, z: 0 };var botRightPos = { x: width / 2, z: 0 };var topScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - topLeftPos.z)) * camera.zoom;var botScale = ((camera.focus - camera.self.z) / ((camera.focus - camera.self.z) - botLeftPos.z)) * camera.zoom; //console.log("topScale: " + topScale); //console.log("BotScale: " + botScale);var targetTopLeftX = topScale * topLeftPos.x + halfWidth;var targetTopLeftY = topScale * y + halfHeight;var targetTopRightX = topScale * topRightPos.x + halfWidth;var targetTopRightY = topScale * y + halfHeight;var targetBotLeftX = botScale * botLeftPos.x + halfWidth;var targetBotLeftY = botScale * y + halfHeight;var targetBotRightX = botScale * botRightPos.x + halfWidth;var targetBotRightY = botScale * y + halfHeight;var curTopLeft = { x: transform.topLeft.x, y: transform.topLeft.y };var curTopRight = { x: transform.topRight.x, y: transform.topRight.y };var curBotLeft = { x: transform.bottomLeft.x, y: transform.bottomLeft.y };var curBotRight = { x: transform.bottomRight.x, y: transform.bottomRight.y };var targetTopLeft = { x: targetTopLeftX, y: targetTopLeftY };var targetTopRight = { x: targetTopRightX, y: targetTopRightY };var targetBotLeft = { x: targetBotLeftX, y: targetBotLeftY };var targetBotRight = { x: targetBotRightX, y: targetBotRightY };var curObject = { rate0: 1, rate1: 1, rate2: 1, rate3: 1, rate4: 1 };function onUpdate0GridHandler() {var tempTopLeftX = curTopLeft.x * curObject.rate0 + targetTopLeft.x * (1 - curObject.rate0);var tempTopLeftY = curTopLeft.y * curObject.rate0 + targetTopLeft.y * (1 - curObject.rate0);transform.topLeft.x = tempTopLeftX;transform.topLeft.y = tempTopLeftY;}function onUpdate1GridHandler() {var tempTopRightX = curTopRight.x * curObject.rate1 + targetTopRight.x * (1 - curObject.rate1);var tempTopRightY = curTopRight.y * curObject.rate1 + targetTopRight.y * (1 - curObject.rate1);transform.topRight.x = tempTopRightX;transform.topRight.y = tempTopRightY;}function onUpdate2GridHandler() {var tempBotLeftX = curBotLeft.x * curObject.rate2 + targetBotLeft.x * (1 - curObject.rate2);var tempBotLeftY = curBotLeft.y * curObject.rate2 + targetBotLeft.y * (1 - curObject.rate2);transform.bottomLeft.x = tempBotLeftX;transform.bottomLeft.y = tempBotLeftY;}function onUpdate3GridHandler() {var tempBotRightX = curBotRight.x * curObject.rate3 + targetBotRight.x * (1 - curObject.rate3);var tempBotRightY = curBotRight.y * curObject.rate3 + targetBotRight.y * (1 - curObject.rate3);transform.bottomRight.x = tempBotRightX;transform.bottomRight.y = tempBotRightY;}TweenLite.to(curObject, .4, { rate0: 0, onUpdate: onUpdate0GridHandler, ease: "Power1.easeOut" });TweenLite.to(curObject, .4, { rate1: 0, onUpdate: onUpdate1GridHandler, ease: "Power1.easeOut" });TweenLite.to(curObject, .4, { rate2: 0, onUpdate: onUpdate2GridHandler, ease: "Power3.easeOut" });TweenLite.to(curObject, .4, { rate3: 0, onUpdate: onUpdate3GridHandler, ease: "Power3.easeOut" });var cover = $(transform.element).find(".cover")[0];TweenLite.to(cover, .4, { opacity: 1, ease: "Power1.easeIn" });// --------------------------------------/*transform.topLeft.x = targetTopLeftX + halfWidth;transform.topLeft.y = targetTopLeftY + halfHeight;transform.topRight.x = targetTopRightX + halfWidth;transform.topRight.y = targetTopRightY + halfHeight;transform.bottomLeft.x = targetBotLeftX + halfWidth;transform.bottomLeft.y = targetBotLeftY + halfHeight;transform.bottomRight.x = targetBotRightX + halfWidth;transform.bottomRight.y = targetBotRightY + halfHeight;*/};(function () {// create PerspectiveTransfromvar elem = document.getElementById("t-content00");var width = 400;var height = 225;var useBackFacing = true;var curCount;var $elem = $(".t-content");var isHorizon = false;var isAnimation = true;var isOpen = true;if (window.innerWidth > window.innerHeight) isHorizon = true;var transformArr = [];//console.log(typeof $elem);$elem.each(function (index) {var transform = new PerspectiveTransform(this, width, height, true);transformArr.push(transform);});curCount = transformArr.length - 1;// $elem.each(function (index) {var transform = transformArr[index]pileElement(transform, index);});function animation() {isAnimation = true;var transformCount = transformArr.length - curCount - 1;var xx, yy;if (isHorizon) {xx = transformCount % 4;yy = parseInt(transformCount / 4);} else {xx = transformCount % 3;yy = parseInt(transformCount / 3);}createGrid(transformArr[curCount], xx, yy, isHorizon);curCount--;if (curCount >= 0) {setTimeout(animation, 100);}else isAnimation = false;}function animation2() {isAnimation = true;createPile(transformArr[curCount], curCount)curCount++;if (curCount <= transformArr.length - 1) setTimeout(animation2, 50);else isAnimation = false;};function loop() {$elem.each(function (index) {transformArr[index].update();});requestAnimationFrame(loop);};loop();setTimeout(animation, 500);$("#toggle").click(function (ev) {if (!isAnimation) {if (isOpen) {curCount = 0;animation2();}else {curCount = transformArr.length - 1;animation();}isOpen = !isOpen;}});})();

注：本文愛編程原創文章，轉載請注明原文地址：http://***/Article/11827

轉載于:https://www.cnblogs.com/liaohuolin/p/4142065.html

總結

以上是生活随笔為你收集整理的一款超炫的图片排列特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。