0条评论
还没有人评论过~
本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置。
首先,我们需要简单的结构处理图片,为了方便操作,引用了一个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列表形式,我们需要让他们随机的出现在屏幕上,就需要使用定位处理,定位后的位置通过随机数产生,在随机分布前,还需要计算出可分布的范围。
最后就添加点击事件了,当点击到某张图片时,该图片出现在屏幕居中位置,且层级最高,这里也是用css产生的效果,需要注意的是,前面的位置参数是通过js生成的,属于行内样式,所以在css的样式中,我们需要添加!important
至此,我们就实现了最开始想要的目标效果了,完整代码如下:
<!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>
下载完整详细代码:点这里
来源:oschina
链接:https://my.oschina.net/u/4349100/blog/3839169