<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 轩照片墙的特效 让开始加载时动画</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;
/*样式就只能走到这里了想让它实现随机的排版就用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>
//让图片在刚刷新加载的时候 添加动画 其实就是先分别 创建 li 与 img 并添加他们
//然后在单独for 遍历 li 来设置每个 li 的不同位置 不同角度 这样他们在刷新加载的时候才有动画
window.onload = function (){
//1 找对象
var oUl =document.getElementById('oUl');
//3.1首先 由最大的事件源创建 li 但是前提是先遍历 li 的个数 这里我们给它 10 就是10张图片啦
for (var i = 0; i < 20; i++) {
//3,2创建li
var li = document.createElement('li');
oUl.appendChild(li);//添加 li 完成以后就 在css 那里设置 li 的样式
// 5 . 创建图片
var pic = document.createElement('img');
// 5.1 给li 添加 pic
li.appendChild(pic);
pic.src = 'xuan/xuan'+(i+1)+'.jpg'; //这里添加的 图片的 张数 要注意了
}
//2 .设置屏幕的width height
var screenW = document.documentElement.clientWidth - 250;//水平方向的宽
var screenH = document.documentElement.clientHeight - 360;
// 4 当 li 被点击的时候 所发生的事件
// 首先获取 lis
var lis = oUl.children;
//for 遍历
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
// 3.3给li设置 不同的位置
// 3.3.1先给li 设置不同的角度
var radoRace = _.random(0,360);
// { //li.style.transform =' rotate(deg)';//先这样写万一写错}
li.style.transform =' rotate('+ radoRace +'deg)';
// 3.3.2给li 设置在屏幕上的不同的位置 就是 X Y 那么就考虑 屏幕的宽高了
var randomX = _.random(0,screenW);//水平方向的坐标 就是指 X 可以是 0 到 360 deg 任意的数字
var randomY = _.random(0,screenH);//注意 他们是不一样的效果 值在小括号里面的图片随机占整个屏
// var randomX =_.random()*screenW;//这种方式的图片都缩在左上角,但是被点击的那一张也还是实现居中的
// var randomY =_.random()*screenH; // 注意观察 值写在外面与写在外面的不同
//3.3.3赋值给 每个 li
li.style.left = randomX + 'px';
li.style.top = randomY + 'px';
// 被点击的 那个 li 单独设置 类名(这些位移 都是在css 那里设置 )
li.onclick = function () {//哪里个 li 被点击就触发
// alert(0);
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className ='cur';
// console.log(this);
}
}
}
</script>
</body>
</html>
网友评论