<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(images/bg.jpg);
}
#div1{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#div1 div{
position: absolute;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-ms-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
border: 6px solid #FFF;
box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
left:-300px;
top:-300px;
cursor: pointer;
}
#div1 div span{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition:1.5s opacity ease-in-out;
-moz-transition:1.5s opacity ease-in-out;
-ms-transition:1.5s opacity ease-in-out;
-o-transition:1.5s opacity ease-in-out;
}
#div1 .active{
border:1px solid #FFF;
box-shadow: 0 0 2px #000;
}
#prev,#next{
position: absolute;
width: 60px;
height: 60px;
top: 50%;
margin-top: -30px;
border: 1px solid #999;
box-shadow: 0 0 1px rgba(0,0,0,0.7);
z-index: 2;
-webkit-transition:0.7s all ease;opacity: 0.6;
-moz-transition:0.7s all ease;opacity: 0.6;
-ms-transition:0.7s all ease;opacity: 0.6;
-o-transition:0.7s all ease;opacity: 0.6;
}
#prev{
left: -20px;
background: url(images/prev.png) center no-repeat #FFF;
border-radius: 0 8px 8px 0;
display: none;
}
#prev:hover{
left: 0px;
opacity: 1;
}
#next{
right: -20px;
background: url(images/next.png) center no-repeat #FFF;
border-radius: 8px 0 0 8px;
display: none;
}
#next:hover{
right: 0px;
opacity: 1;
}
.back{
position: absolute;
right: 20px;
top:10px;
color: #000;
text-shadow:1px 1px 3px #999999;
text-decoration: none;
z-index: 10000
}
</style>

<body>
<a href="http://http://www.cnblogs.com/work-web/" target="_blank" class="back"></a>
<a href="javascript:void(0)" id="prev"></a>
<a href="javascript:void(0)" id="next"></a>
<div id="div1"></div>
</body>

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

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

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

  2. javascript照片墙效果

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js实现照片墙效果

    本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...

  5. h5 吸顶效果 顶部悬浮

    window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.sc ...

  6. iOS -- 透明H5(webView)效果的实现

    前几天有一个完全透明的webView加载H5页面的效果的实现,就相当于是一个半透明的遮罩层,上面有一个不透明的图片,一般原生的带遮罩层的弹框会采用这种方式,如果是原生代码实现,就简单的多了,视图的叠加 ...

  7. 使用canvas实现画中画效果的H5

    最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...

  8. 一次H5毛玻璃效果有感

    印象中H5实现毛玻璃效果是挺好实现的,主要的代码就是css的filter:blur. 之前也用过几次,给背景图加高斯模糊啊,给一个div加高斯模糊啊.只要给需要添加高斯模糊的元素直接添加filter属 ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. JS运动缓冲的封装函数

    之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 rati ...

  2. 06jQuery-05-事件

    不同的浏览器绑定事件的代码都不太一样,所以我们使用jQuery来写代码的话,可以屏蔽不同浏览器之间的差异. 在jQuery中,可以使用 on 来绑定一个事件,指定事件的名称和对应的处理函数: // 获 ...

  3. 利用Struts拦截器限制上传图片的格式和大小

    在这之前 Struts的一个核心功能就是大量的拦截器,既然是框架,那么自然也就贴心地为我们准备好了各种常用的功能,比如这里即将讨论的如何限制上传图片的格式和大小.那么既然是使用Struts已经写好的拦 ...

  4. 编译Linux-4.9.9内核流程记录

    本文部分资料出自: http://www.cnblogs.com/xiaocen/p/3717993.html 首先下载代码: https://www.kernel.org/pub/linux/ker ...

  5. 与 Hadoop 对比，如何看待 Spark 技术？

    主要是先看MapReduce模型有什么问题? 第一:需要写很多底层的代码不够高效,第二:所有的事情必须要转化成两个操作Map/Reduce,这本身就很奇怪,也不能解决所有的情况. 其实Spark出现就 ...

  6. Maven（五）之Maven配置阿里云镜像飞快下jar包

    用过Maven的人都知道Maven对于依赖的管理让我们程序员从此远离了自己去在项目中把需要的jar包导入到项目中,但是因为中央仓库是在国外的,所以在我们从中央仓库下载依赖的时候, 我们发现下载速度真的 ...

  7. OpenStack Pike超详细搭建文档 LinuxBridge版

    前言 搭建前必须看我 本文档搭建的是分布式P版openstack(1 controller + N compute + 1 cinder)的文档. openstack版本为Pike. 搭建的时候,请严 ...

  8. 记录各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

     记录遇到的IE BUG:  1.IE8开发者工具打不开 解决办法:IE8新增了开发人员工具,非常不错,比早期的DevToolbar好用多了.不过在我的Win7下 使用的时候偶尔会出现一个莫名其妙的问 ...

  9. SSM框架—详细整合教程(Spring+SpringMVC+MyBatis)

    很久没有新搭建过框架了,今天搭建一遍.以往都是在eclipse中搭建,今天换Idea吧,目前来说Idea用的还是很多的,但是用习惯了eclipse的朋友,可能会不太习惯 ok.....开始: 注意区分 ...

  10. The area 积分积分

    The area Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...