<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 軒照片墻的特效 讓開(kāi)始加載時(shí)動(dòng)畫(huà)</title>
<style>
{
margin: 0;
padding: 0;
border:none;
}
body,html,ul {
width:100%;
height:100%;
}
#oUl{
position: relative;
}
#oUl li{
width: 250px;
height: 360px;
box-shadow: 0 0 10px #000;
position: absolute;
/top:0;/
/left: 0;*/
list-style: none;
transform: rotateZ(220deg);
transition:all 1s;
background: #fff;
/*樣式就只能走到這里了想讓它實(shí)現(xiàn)隨機(jī)的排版就用js吧*/
}
#oUl .cur{
position: absolute;
top:50%!important;
left:50%!important;
/*background: red;*/
transform: rotateZ(0deg) translate(-50%,-50%) scale(1.3)!important;
z-index: 999;
}
img{
width:100%;
/*background-size: 100% 100%;*/
}
</style>
<style></style>
</head>
<body>
<ul id="oUl">
</ul>
<script src="js/Underscore-min.js"></script>
<script>
//讓圖片在剛刷新加載的時(shí)候 添加動(dòng)畫(huà) 其實(shí)就是先分別 創(chuàng)建 li 與 img 并添加他們
//然后在單獨(dú)for 遍歷 li 來(lái)設(shè)置每個(gè) li 的不同位置 不同角度 這樣他們?cè)谒⑿录虞d的時(shí)候才有動(dòng)畫(huà)
window.onload = function (){
//1 找對(duì)象
var oUl =document.getElementById('oUl');
//3.1首先 由最大的事件源創(chuàng)建 li 但是前提是先遍歷 li 的個(gè)數(shù) 這里我們給它 10 就是10張圖片啦
for (var i = 0; i < 20; i++) {
//3,2創(chuàng)建li
var li = document.createElement('li');
oUl.appendChild(li);//添加 li 完成以后就 在css 那里設(shè)置 li 的樣式
// 5 . 創(chuàng)建圖片
var pic = document.createElement('img');
// 5.1 給li 添加 pic
li.appendChild(pic);
pic.src = 'xuan/xuan'+(i+1)+'.jpg'; //這里添加的 圖片的 張數(shù) 要注意了
}
//2 .設(shè)置屏幕的width height
var screenW = document.documentElement.clientWidth - 250;//水平方向的寬
var screenH = document.documentElement.clientHeight - 360;
// 4 當(dāng) li 被點(diǎn)擊的時(shí)候 所發(fā)生的事件
// 首先獲取 lis
var lis = oUl.children;
//for 遍歷
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
// 3.3給li設(shè)置 不同的位置
// 3.3.1先給li 設(shè)置不同的角度
var radoRace = _.random(0,360);
// { //li.style.transform =' rotate(deg)';//先這樣寫(xiě)萬(wàn)一寫(xiě)錯(cuò)}
li.style.transform =' rotate('+ radoRace +'deg)';
// 3.3.2給li 設(shè)置在屏幕上的不同的位置 就是 X Y 那么就考慮 屏幕的寬高了
var randomX = _.random(0,screenW);//水平方向的坐標(biāo) 就是指 X 可以是 0 到 360 deg 任意的數(shù)字
var randomY = _.random(0,screenH);//注意 他們是不一樣的效果 值在小括號(hào)里面的圖片隨機(jī)占整個(gè)屏
// var randomX =_.random()*screenW;//這種方式的圖片都縮在左上角,但是被點(diǎn)擊的那一張也還是實(shí)現(xiàn)居中的
// var randomY =_.random()*screenH; // 注意觀(guān)察 值寫(xiě)在外面與寫(xiě)在外面的不同
//3.3.3賦值給 每個(gè) li
li.style.left = randomX + 'px';
li.style.top = randomY + 'px';
// 被點(diǎn)擊的 那個(gè) li 單獨(dú)設(shè)置 類(lèi)名(這些位移 都是在css 那里設(shè)置 )
li.onclick = function () {//哪里個(gè) li 被點(diǎn)擊就觸發(fā)
// alert(0);
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className ='cur';
// console.log(this);
}
}
}
</script>
</body>
</html>
