本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置。

首先,我们需要简单的结构处理图片,为了方便操作,引用了一个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>

下载完整详细代码:点这里

js实现照片墙效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  7. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

  1. ZOJ4060 Flippy Sequence(思维题)

    题目链接:传送门 题目大意: 两个长度为n的二进制串s,t,每次操作可以将s串的一段区间取反.求操作exactly twice后使得s=t的方法数. 思路: 连续的尽可能长的 si ≠ ti 的区间简 ...

  2. 2017.4.7 Sprng MVC工作流程描述图

    图一: 图二: Spring工作流程描述         1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServlet捕获:       2. Dispa ...

  3. YIT-CTF—密码学

    一.哼哼 小猪生活的地方在哪里? 看题目联想到是猪圈加密 二.卢本伟 LOL我只服五五开 ๑乛◡乛๑babbababaababbababaaababaaaaaaabaaa 更具提示“五五开”,再看到这 ...

  4. &,~,|,^

    与.或.异或的运算   与运算 (“  & ”) 参与运算的两个数据,按照二进制位进行“与运算”.运算规则:0&0=0;   0&1=0;   1&0=0;    1& ...

  5. JPI中常使用的类介绍:

    Math类: java.lang包下的 final,不可被继承, 其中的方法和属性都是静态的 其构造方法私有化了,其他类不可以使用构造方法. 向上取整:Math.ceil(double d); 向下取 ...

  6. Python 3 运行 shell 命令

    #python 3.5 , win10 引入包 #os.chdir('path') import osimport subprocess #https://docs.python.org/3.5/li ...

  7. string的方法find

    官方解释:find(sub[, start[, end]]) Return the lowest index in the string where substring sub is found wi ...

  8. Go Example--锁

    package main import ( "fmt" "math/rand" "runtime" "sync" &qu ...

  9. 每天进步一点点-写完睡觉-周一工作(java基本数据类型所占的字节和IO流读取的字符和字节)

  10. yum源更换为本地光盘

    下面来示范一下如何使用光盘文件配置yum库.注意:一定要把/etc/yum.repos.d里的其他文件移到其他地方,否则会报错 进入到/etc/yum.repos.d目录中后创建Yum配置文件: [r ...