javascript图片展示墙特效

查看效果：http://hovertree.com/code/javascript/pwl4bhoi.htm

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>何问起海报画廊</title><base target="_blank" />

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         body {

             background-color: #333;

             color: yellowgreen;

             font-family: 'Avenir Next', 'Lantinghei SC';

             font-size: 14px;

             -webkit-font-smoothing: antialiased;

             -moz-osx-font-smoothing: grayscale;

         }

         a{color:yellow}

         .wrap {

             width: 100%;

             height: 600px;

             position: absolute;

             top: 50%;

             margin-top: -300px;

             background-color: #333;

             overflow: hidden;

             perspective: 800px;

             -webkit-perspective: 800px;

         }

         .photo {

             position: absolute;

             width: 260px;

             height: 320px;

             z-index: 1;

             box-shadow: 0 0 1px rgba(0, 0, 0, .01);

             transition: all .5s;

             -moz-transition: all .5s;

             -webkit-transition: all .5s;

             -o-transition: all .5s;

             left: 50%;

             top: 50%;

             margin: -160px 0 0 -130px;

         }

             .photo .photo-wrap .side {

                 position: absolute;

                 width: 100%;

                 height: 100%;

                 background-color: #eee;

                 top: 0;

                 right: 0;

                 padding: 20px;

                 box-sizing: border-box;

                 -moz-box-sizing：border-box;

                 backface-visibility: hidden;

                 -webkit-backface-visibility: hidden;

                 -moz-backface-visibility: hidden;

                 -ms-backface-visibility: hidden;

             }

             .photo .photo-wrap .side-front {

                 transform: rotateY(0deg);

                 -webkit-transform: rotateY(0deg);

                 -moz-transform: rotateY(0deg);

                 -o-transform: rotateY(0deg);

                 -ms-transform: rotateY(0deg);

             }

                 .photo .photo-wrap .side-front .image {

                     width: 100%;

                     height: 250px;

                     line-height: 250px;

                     overflow: hidden;

                 }

                     .photo .photo-wrap .side-front .image img {

                         width: 100%;

                         vertical-align: middle;

                     }

                 .photo .photo-wrap .side-front .caption {

                     text-align: center;

                     font-size: 16px;

                     line-height: 50px;

                 }

             .photo .photo-wrap .side-back {

                 transform: rotateY(180deg);

                 -webkit-transform: rotateY(180deg);

                 -moz-transform: rotateY(180deg);

                 -o-transform: rotateY(180deg);

                 -ms-transform: rotateY(180deg);

             }

                 .photo .photo-wrap .side-back .desc {

                     color: #666;

                     font-size: 14px;

                     line-height: 1.5em;

                 }

         .photo_center {

             top: 50%;

             left: 50%;

             margin: -160px 0 0 -130px;

             z-index: 2;

         }

         .photo .photo-wrap {

             position: absolute;

             width: 100%;

             height: 100%;

             transform-style: preserve-3d;

             -webkit-transform-style: preserve-3d;

             transition: all .6s ease-in-out;

             -webkit-transition: all .6s ease-in-out;

             -moz-transition: all .5s;

             -o-transition: all .5s;

             transform-origin: 0% 50% 0px;

             -ms-transform-origin: 0% 50% 0px;

             -o-transform-origin: 0% 50% 0px;

             -webkit-transform-origin: 0% 50% 0px;

             -moz-transform-origin: 0% 50% 0px;

         }

         .photo_front .photo-wrap {

             transform: translate(0px, 0px) rotateY(0deg);

             -webkit-transform: translate(0px, 0px) rotateY(0deg);

             -moz-transform: translate(0px, 0px) rotateY(0deg);

             -o-transform: translate(0px, 0px) rotateY(0deg);

             -ms-transform: translate(0px, 0px) rotateY(0deg);

         }

         .photo_back .photo-wrap {

             transform: translate(260px, 0px) rotateY(180deg);

             -webkit-transform: translate(260px, 0px) rotateY(180deg);

             -moz-transform: translate(260px, 0px) rotateY(180deg);

             -o-transform: translate(260px, 0px) rotateY(180deg);

             -ms-transform: translate(260px, 0px) rotateY(180deg);

         }

         @font-face {

             font-family: 'icomoon';

             src: url('images/icomoon.woff') format('woff');

             font-weight: normal;

             font-size: normal;

         }

         .nav {

             position: absolute;

             width: 80%;

             left: 10%;

             height: 30px;

             line-height: 30px;

             bottom: 20px;

             z-index: 3;

             text-align: center;

         }

             .nav .i {

                 display: inline-block;

                 width: 30px;

                 height: 30px;

                 cursor: pointer;

                 background-color: #aaa;

                 text-align: center;

                 border-radius: 50px;

                 transform: scale(.5);

                 -webkit-transform: scale(.5);

                 -moz-transform: scale(.5);

                 -o-transform: scale(.5);

                 -ms-transform: scale(.5);

                 transition: all .5s;

                 -webkit-transition: all .5s;

                 -moz-transition: all .5s;

                 -o-transition: all .5s;

             }

                 .nav .i:after {

                     content: '\e965';

                     font-family: 'icomoon';

                     font-size: 80%;

                     display: inline-block;

                     line-height: 30px;

                     text-align: center;

                     color: #fff;

                     opacity: 0;

                 }

             .nav .i_current {

                 transform: scale(1);

                 -webkit-transform: scale(1);

                 -moz-transform: scale(1);

                 -o-transform: scale(1);

                 -ms-transform: scale(1);

             }

                 .nav .i_current:after {

                     opacity: 1;

                 }

             .nav .i_back {

                 background-color: #555;

                 transform: rotateY(180deg);

                 -webkit-transform: rotateY(180deg);

                 -moz-transform: rotateY(180deg);

                 -o-transform: rotateY(180deg);

                 -ms-transform: rotateY(180deg);

             }

         #wrap {color:#333

         }

     </style>

 </head>

 <body onselectstart="return false;" style="-moz-user-select:none;">

     <div>何问起海报走廊 <a href="http://hoverteee.com">首页</a> <a href="http://hoverteee.com/texiao/">特效</a> <a href="http://hovertree.com/code/javascript/pwl4bhoi.htm">代码</a> <a href="http://hovertree.com/h/bjaf/punh2bn7.htm">注释</a> <a href="http://hovertree.com/h/bjaf/h5aljrea.htm">下载</a></div>

     <div class="wrap" id="wrap">何问起</div>

     <script type="text/javascript" src="http://hovertree.com/texiao/js/15/images/data.js"></script>

     <script type="text/javascript">

         function g(selector) { return selector.substring(0, 1) == "." ? document.getElementsByClassName(selector.substring(1)) : document.getElementById(selector.substring(1)) } function random(range) { var min = Math.min(range[0], range[1]); var max = Math.max(range[0], range[1]); var diff = max - min; var number = Math.round(Math.random() * diff) + min; return number } function addPhotos() { var _wrap = ""; var _nav = ""; for (var i = 0; i < data.length; i++) { _wrap += '<div class="photo  photo_front" onclick="turn(this)" id="photo_' + (i + 1) + '"><div class="photo-wrap"><div class="side side-front"><p class="image"><img src="' + data[i].img + '"></p><p class="caption">' + data[i].caption + '</p></div><div class="side side-back"><p class="desc">' + data[i].desc + "</p></div></div></div></div>"; _nav += '<span id="nav_' + (i + 1) + '" onclick="turn(g(\'#photo_' + (i + 1) + '\'))" class="i"></span>' } var navigation = '<div class="nav">' + _nav + "</div>"; g("#wrap").innerHTML = _wrap + navigation; rsort(random([1, data.length])) } addPhotos(); function range() { var range = { left: { x: [], y: [] }, right: { x: [], y: [] } }; var wrap = { width: g("#wrap").clientWidth, height: g("#wrap").clientHeight }; var photo = { width: g(".photo")[0].clientWidth, height: g(".photo")[0].clientHeight }; range.left.x = [0 - photo.width / 4 + 130, wrap.width / 2 - photo.width * 5 / 4 + 130]; range.left.y = [0 - photo.height / 4 + 160, wrap.height - photo.height * 3 / 4 + 160]; range.right.x = [wrap.width / 2 + photo.width / 4 + 130, wrap.width - photo.width / 4 + 130]; range.right.y = range.left.y; return range } function rsort(n) { var _photo = g(".photo"); var photos = []; for (var i = 0; i < _photo.length; i++) { _photo[i].className = "photo photo_front"; _photo[i].style.left = ""; _photo[i].style.top = ""; _photo[i].style["transform"] = _photo[i].style["-webkit-transform"] = "scale(1.3)"; photos.push(_photo[i]) } var photo_center = g("#photo_" + n); photo_center.className += " photo_center"; photo_center = photos.splice(n - 1, 1); var photos_left = photos.splice(0, Math.ceil(photos.length / 2)); var photos_right = photos; var ranges = range(); for (var j = 0; j < photos_left.length; j++) { var photo = photos_left[j]; photo.style.left = random(ranges.left.x) + "px"; photo.style.top = random(ranges.left.y) + "px"; photo.style["transform"] = photo.style["-webkit-transform"] = "rotate(" + random([-150, 150]) + "deg) scale(1)" } for (var s = 0; s < photos_right.length; s++) { var photo = photos_right[s]; photo.style.left = random(ranges.right.x) + "px"; photo.style.top = random(ranges.right.y) + "px"; photo.style["transform"] = photo.style["-webkit-transform"] = "rotate(" + random([-150, 150]) + "deg) scale(1)" } var navs = g(".i"); for (var k = 0; k < navs.length; k++) { navs[k].className = "i" } g("#nav_" + n).className += " i_current" } function turn(elem) { var cls = elem.className; var n = elem.id.split("_")[1]; if (!/photo_center/.test(cls)) { return rsort(n) } if (/photo_front/.test(cls)) { cls = cls.replace(/photo_front/, "photo_back"); g("#nav_" + n).className += " i_back" } else { cls = cls.replace(/photo_back/, "photo_front"); g("#nav_" + n).className = g("#nav_" + n).className.replace(/\s*i_back\s*/, " ") } elem.className = cls };

     </script>

 </body>

 </html>

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

javascript图片展示墙特效的更多相关文章

原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
带左右箭头切换的自动滚动图片JS特效
效果图按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
纯CSS3实现图片展示特效
本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...
Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
JavaScript实战-菜单特效
以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...
javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

随机推荐

常用SQL[ORACLE]
1.常用系统函数 2.常用sql语句 3.一些定义和关键字 4.需要注意点 1.常用系统函数 ↑ --decode decode(column,if_value,value,elseif_ ...
备忘-Android ViewPager 子页监听事件
@Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews ...
2013 duilib入门简明教程 -- 前言(1)
关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面进入正题: 不看广告看疗效! 已有众多知名公司采用duilib做为界面库,如华为网盘. ...
iOS--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook等系统服务开发汇总
iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用系统应用.使用系统服务: ...
iOS中怎么存储照片到自定义相册
在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路: 1.对系统相册进行操作的前提必须导入#import &l ...
php安装的一点点事 ---wampserver
安装wampserver后,需要配置一些文件 1. 首先修改httpd.conf <Directory /> Options FollowSymLinks AllowOverride No ...
OpenCASCADE Performance Test
OpenCASCADE Performance Test eryar@163.com Abstract. Use the Draw Test Harness to test the performan ...
为 Neutron 准备物理基础设施（I） - 每天5分钟玩转 OpenStack（75）
前面讨论了 Neutron 的架构和基础知识,接下来就要通过实验深入学习和实践了. 第一步就是准备实验用的物理环境,考虑如下几个问题: 需要几个节点? 如何分配节点的角色? 节点上部署哪些服务? 配几 ...
ASP.NET MVC之Unobtrusive Ajax（五）
前言这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...
Android获取内置sdcard跟外置sdcard路径
Android获取内置sdcard跟外置sdcard路径.(测试过两个手机,亲测可用) 1.先得到外置sdcard路径,这个接口是系统提供的标准接口. 2.得到上一级文件夹目录 3.得到该目录的所有文 ...

javascript图片展示墙特效

javascript图片展示墙特效的更多相关文章

随机推荐

热门专题