本次要實現的是一個照片牆的效果，如下圖，很多圖片隨機的擺放在窗口中，當點擊到某一張的時候，該張圖片出現出現在窗口的水平垂直居中的位置。
首先，我們需要簡單的結構處理圖片，為了方便操作，引用了一個js庫：underscore.js，因為圖片的數量是不固定的，這里我們采用動態添加的方式生成li，再在li里面添加圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; border: none; list-style: none; } html, body, ul{ width: 100%; height: 100%; } #ps{ position: relative; } #ps li{ width: 250px; height: 360px; box-shadow: 0 0 10px #000; } </style> </head> <body> <ul id="ps"></ul> <script src="js/Underscore-min.js"></script> <script> window.onload = function () { var ps = document.getElementById("ps"); //動態創建li標簽 for(var i=0; i<10; i++){ //創建li標簽 var li = document.createElement("li"); ps.appendChild(li); //創建img標簽 var img = document.createElement("img"); img.src = "images/pic" + (i + 1) + ".jpg"; li.appendChild(img); } } </script> </body> </html>
此時是這種常規的li列表形式，我們需要讓他們隨機的出現在屏幕上，就需要使用定位處理，定位后的位置通過隨機數產生，在隨機分布前，還需要計算出可分布的范圍。
//獲取所有的li
var allLis = ps.children;
var screenW = document.documentElement.clientWidth - 250;
var screenH = document.documentElement.clientHeight - 360;
//遍歷
for(var j=0; j<allLis.length; j++){
//取出單個li標簽
var li = allLis[j];
//隨機分布
li.style.left = _.random(0, screenW) + 'px';
li.style.top = _.random(0, screenH) + 'px';
//隨機角度
li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';
}
最后就添加點擊事件了，當點擊到某張圖片時，該圖片出現在屏幕居中位置，且層級最高，這里也是用css產生的效果，需要注意的是，前面的位置參數是通過js生成的，屬於行內樣式，所以在css的樣式中，我們需要添加!important
#ps li.current{
left: 50% !important;
top: 50% !important;
transform: rotate(0deg) translate(-50%, -50%) scale(1.2, 1.2) !important;
z-index: 99;
}
//點擊事件
li.onclick = function () {
for(var i = 0; i<allLis.length; i++){
allLis[i].className = '';
}
this.className = 'current';
}
至此，我們就實現了最開始想要的目標效果了，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; border: none; list-style: none; } html, body, ul{ width: 100%; height: 100%; } #ps{ position: relative; } #ps li{ width: 250px; height: 360px; box-shadow: 0 0 10px #000; position: absolute; transition: all 1s; } #ps li.current{ left: 50% !important; top: 50% !important; transform: rotate(0deg) translate(-50%, -50%) scale(1.2, 1.2) !important; z-index: 99; } </style> </head> <body> <ul id="ps"></ul> <script src="js/Underscore-min.js"></script> <script> window.onload = function () { var ps = document.getElementById("ps"); //動態創建li標簽 for(var i=0; i<10; i++){ //創建li標簽 var li = document.createElement("li"); ps.appendChild(li); //創建img標簽 var img = document.createElement("img"); img.src = "images/pic" + (i + 1) + ".jpg"; li.appendChild(img); } //獲取所有的li var allLis = ps.children; var screenW = document.documentElement.clientWidth - 250; var screenH = document.documentElement.clientHeight - 360; //遍歷 for(var j=0; j<allLis.length; j++){ //取出單個li標簽 var li = allLis[j]; //隨機分布 li.style.left = _.random(0, screenW) + 'px'; li.style.top = _.random(0, screenH) + 'px'; //隨機角度 li.style.transform = 'rotate(' + _.random(0, 360) +'deg)'; //點擊事件 li.onclick = function () { for(var i = 0; i<allLis.length; i++){ allLis[i].className = ''; } this.className = 'current'; } } } </script> </body> </html>
下載完整詳細代碼：點這里