javascript图片展示墙特效

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

代码如下:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>何问起海报画廊</title><base target="_blank" />
  6     <style type="text/css">
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11 
 12         body {
 13             background-color: #333;
 14             color: yellowgreen;
 15             font-family: 'Avenir Next', 'Lantinghei SC';
 16             font-size: 14px;
 17             -webkit-font-smoothing: antialiased;
 18             -moz-osx-font-smoothing: grayscale;
 19         }
 20         a{color:yellow}
 21         .wrap {
 22             width: 100%;
 23             height: 600px;
 24             position: absolute;
 25             top: 50%;
 26             margin-top: -300px;
 27             background-color: #333;
 28             overflow: hidden;
 29             perspective: 800px;
 30             -webkit-perspective: 800px;
 31         }
 32 
 33         .photo {
 34             position: absolute;
 35             width: 260px;
 36             height: 320px;
 37             z-index: 1;
 38             box-shadow: 0 0 1px rgba(0, 0, 0, .01);
 39             transition: all .5s;
 40             -moz-transition: all .5s;
 41             -webkit-transition: all .5s;
 42             -o-transition: all .5s;
 43             left: 50%;
 44             top: 50%;
 45             margin: -160px 0 0 -130px;
 46         }
 47 
 48             .photo .photo-wrap .side {
 49                 position: absolute;
 50                 width: 100%;
 51                 height: 100%;
 52                 background-color: #eee;
 53                 top: 0;
 54                 right: 0;
 55                 padding: 20px;
 56                 box-sizing: border-box;
 57                 -moz-box-sizing:border-box;
 58                 backface-visibility: hidden;
 59                 -webkit-backface-visibility: hidden;
 60                 -moz-backface-visibility: hidden;
 61                 -ms-backface-visibility: hidden;
 62             }
 63 
 64             .photo .photo-wrap .side-front {
 65                 transform: rotateY(0deg);
 66                 -webkit-transform: rotateY(0deg);
 67                 -moz-transform: rotateY(0deg);
 68                 -o-transform: rotateY(0deg);
 69                 -ms-transform: rotateY(0deg);
 70             }
 71 
 72                 .photo .photo-wrap .side-front .image {
 73                     width: 100%;
 74                     height: 250px;
 75                     line-height: 250px;
 76                     overflow: hidden;
 77                 }
 78 
 79                     .photo .photo-wrap .side-front .image img {
 80                         width: 100%;
 81                         vertical-align: middle;
 82                     }
 83 
 84                 .photo .photo-wrap .side-front .caption {
 85                     text-align: center;
 86                     font-size: 16px;
 87                     line-height: 50px;
 88                 }
 89 
 90             .photo .photo-wrap .side-back {
 91                 transform: rotateY(180deg);
 92                 -webkit-transform: rotateY(180deg);
 93                 -moz-transform: rotateY(180deg);
 94                 -o-transform: rotateY(180deg);
 95                 -ms-transform: rotateY(180deg);
 96             }
 97 
 98                 .photo .photo-wrap .side-back .desc {
 99                     color: #666;
100                     font-size: 14px;
101                     line-height: 1.5em;
102                 }
103 
104         .photo_center {
105             top: 50%;
106             left: 50%;
107             margin: -160px 0 0 -130px;
108             z-index: 2;
109         }
110 
111         .photo .photo-wrap {
112             position: absolute;
113             width: 100%;
114             height: 100%;
115             transform-style: preserve-3d;
116             -webkit-transform-style: preserve-3d;
117             transition: all .6s ease-in-out;
118             -webkit-transition: all .6s ease-in-out;
119             -moz-transition: all .5s;
120             -o-transition: all .5s;
121             transform-origin: 0% 50% 0px;
122             -ms-transform-origin: 0% 50% 0px;
123             -o-transform-origin: 0% 50% 0px;
124             -webkit-transform-origin: 0% 50% 0px;
125             -moz-transform-origin: 0% 50% 0px;
126         }
127 
128         .photo_front .photo-wrap {
129             transform: translate(0px, 0px) rotateY(0deg);
130             -webkit-transform: translate(0px, 0px) rotateY(0deg);
131             -moz-transform: translate(0px, 0px) rotateY(0deg);
132             -o-transform: translate(0px, 0px) rotateY(0deg);
133             -ms-transform: translate(0px, 0px) rotateY(0deg);
134         }
135 
136         .photo_back .photo-wrap {
137             transform: translate(260px, 0px) rotateY(180deg);
138             -webkit-transform: translate(260px, 0px) rotateY(180deg);
139             -moz-transform: translate(260px, 0px) rotateY(180deg);
140             -o-transform: translate(260px, 0px) rotateY(180deg);
141             -ms-transform: translate(260px, 0px) rotateY(180deg);
142         }
143 
144         @font-face {
145             font-family: 'icomoon';
146             src: url('images/icomoon.woff') format('woff');
147             font-weight: normal;
148             font-size: normal;
149         }
150 
151         .nav {
152             position: absolute;
153             width: 80%;
154             left: 10%;
155             height: 30px;
156             line-height: 30px;
157             bottom: 20px;
158             z-index: 3;
159             text-align: center;
160         }
161 
162             .nav .i {
163                 display: inline-block;
164                 width: 30px;
165                 height: 30px;
166                 cursor: pointer;
167                 background-color: #aaa;
168                 text-align: center;
169                 border-radius: 50px;
170                 transform: scale(.5);
171                 -webkit-transform: scale(.5);
172                 -moz-transform: scale(.5);
173                 -o-transform: scale(.5);
174                 -ms-transform: scale(.5);
175                 transition: all .5s;
176                 -webkit-transition: all .5s;
177                 -moz-transition: all .5s;
178                 -o-transition: all .5s;
179             }
180 
181                 .nav .i:after {
182                     content: '\e965';
183                     font-family: 'icomoon';
184                     font-size: 80%;
185                     display: inline-block;
186                     line-height: 30px;
187                     text-align: center;
188                     color: #fff;
189                     opacity: 0;
190                 }
191 
192             .nav .i_current {
193                 transform: scale(1);
194                 -webkit-transform: scale(1);
195                 -moz-transform: scale(1);
196                 -o-transform: scale(1);
197                 -ms-transform: scale(1);
198             }
199 
200                 .nav .i_current:after {
201                     opacity: 1;
202                 }
203 
204             .nav .i_back {
205                 background-color: #555;
206                 transform: rotateY(180deg);
207                 -webkit-transform: rotateY(180deg);
208                 -moz-transform: rotateY(180deg);
209                 -o-transform: rotateY(180deg);
210                 -ms-transform: rotateY(180deg);
211             }
212         #wrap {color:#333
213         }
214     </style>
215 </head>
216 <body onselectstart="return false;" style="-moz-user-select:none;">
217     <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>
218     <div class="wrap" id="wrap">何问起</div>
219     <script type="text/javascript" src="http://hovertree.com/texiao/js/15/images/data.js"></script>
220     <script type="text/javascript">
221         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 };
222     </script>
223 </body>
224 </html>

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

你可能感兴趣的:(javascript图片展示墙特效)