你的位置:首页 > Java教程

[Java教程]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:#333213     }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 onclick="turn(this)" id="photo_' + (i + 1) + '"><div ><div ><p ><img src="' + data[i].img + '"></p><p >' + data[i].caption + '</p></div><div ><p >' + data[i].desc + "</p></div></div></div></div>"; _nav += '<span id="nav_' + (i + 1) + '" onclick="turn(g(\'#photo_' + (i + 1) + '\'))" ></span>' } var navigation = '<div >' + _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