用js与css3实现画廊页面效果
2016-10-17 本文已影响406人
hopevow
基于前一篇爬虫爬取的素材，完成一个酷炫的画廊效果页面
- 最终效果图:
最终效果图.png
-
效果演示
效果预览.gif
页面布局:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/css.css">
</head>
<body onselectstart="return false">
<div class="wrap" id="wrap">
<div class="photo photo-front" id="photo_{{index}}" onclick="turn(this)">
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="./py/img/{{img}}" alt=""></p>
<p class="caption">{{caption}}</p>
</div>
<div class="side side-back">
<p class="des">{{des}}</p>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</html>
页面样式
* {
margin : 0;
padding : 0;
font-size : 14px;
}
li {
list-style-type : none;
}
.wrap {
width : 100%;
height : 600px;
position : absolute;
top : 50%;
margin-top : -300px;
background-color :#333;
overflow : hidden;
perspective : 800px;
}
.photo {
left : 50%;
top :50%;
margin : -160px 0 0 -130px;
width : 260px;
height : 320px;
position :absolute;
box-shadow : 4px 1px 1px rgba(0,0,0,.01);
-webkit-transition : all 1s;
-moz-transition : all 1s;
}
.photo .side {
width : 100%;
height : 100%;
background-color : #eee;
position : absolute;
top : 0;
right : 0;
padding : 20px;
box-sizing : border-box;
}
.photo .side-front {}
.photo .side-front .image{
width : 100%;
height : 250px;
line-height : 250px;
overflow : hidden;
}
.photo .side-front .image img{
width :100%;
}
.photo .side-front .caption {
font-size : 16px;
height : 50px;
line-height: 50px;
text-align : center;
overflow : hidden;
}
.photo .side-back{
}
.photo .side-back .des{
color : #666;
font-size :14px;
line-height : 1.5em;
}
.photo_center {
top :50%;
left: 50%;
margin : -160px 0 0 -130px;
z-index : 999;
transform : scale(1.2);
}
.photo-wrap {
width : 100%;
height : 100%;
position: absolute;
transform-style : preserve-3d;
transition : all 1s;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
}
.photo-wrap .side-front {
transform : rotateY(0deg);
}
.photo-wrap .side-back {
transform : rotateY(180deg);
}
.photo-wrap .side {
backface-visibility : hidden;
}
.photo-front .photo-wrap{
-webkit-transform : translate(0px, 0px) rotateY(0deg);
-moz-transform : translate(0px, 0px) rotateY(0deg);
}
.photo-back .photo-wrap {
-webkit-transform : translate(260px, 0px) rotateY(180deg);
-moz-transform : translate(260px, 0px) rotateY(180deg);
}
.nav {
position :absolute;
width : 80%;
height : 30px;
bottom : 20px;
left : 10%;
z-index : 999;
line-height : 30px;
text-align : center;
}
.nav .i {
display : inline-block;
width : 30px;
background-color : #ccc;
height : 30px;
cursor : pointer;
text-align : center;
border-radius : 50%;
-webkit-transform : scale(.48);
-webkit-transition : all 1s;
-moz-transform : scale(.48);
-moz-transition : all 1s;
}
.nav .i_current {
-webkit-transform : scale(1);
-moz-transform : scale(1);
}
.nav .i_back {
background-color : green;
-webkit-transform : rotateY(-180deg);
-moz-transform : rotateY(-180deg);
}
js代码
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*/, ' ');
}
return elem.className = cls;
}
function g (selector) {
var method = selector.substr(0,1) == '.' ? 'getElementsByClassName' : 'getElementById';
//console.log(method);
return document[method](selector.substr(1));
}
var imgs = data.splice(0,21);
function addPhotos () {
template = g("#wrap").innerHTML;
var html = [];
var nav = [];
for (s in imgs) {
var _html = template.replace("{{index}}", s)
.replace("{{caption}}", imgs[s].caption)
.replace("{{img}}", imgs[s].img)
.replace("{{des}}", imgs[s].des);
html.push(_html);
nav.push('<span id="nav_'+ s +'" onclick="turn(g(\\\\\\\\\\\\\\\\'#photo_'+s+'\\\\\\\\\\\\\\\\'))" class="i"> </span>');
}
//console.log(html.join(' '))
html.push('<div class="nav">'+nav.join('')+'</div>');
g("#wrap").innerHTML = html.join("");
}
addPhotos();
function random(range) {
var min = Math.min(range[0], range[1]);
var max = Math.max(range[0], range[1]);
var diff = max - min;
return Math.floor((Math.random() * diff + min));
}
function rsort(n) {
var _photos = g(".photo");
var _navs = g(".i");
for (var s=0;s<_navs.length;s++) {
_navs[s].className = _navs[s].className.replace(/\\\\\\\\\\\\\\\\s*i_current\\\\\\\\\\\\\\\\s*/, ' ').replace(/\\\\\\\\\\\\\\\\s*i_back\\\\\\\\\\\\\\\\s*/,' ');
}
var photos = [];
for (var i=0;i<_photos.length;i++) {
_photos[i].className = _photos[i].className.replace(/\\\\\\\\\\\\\\\\s*photo_center\\\\\\\\\\\\\\\\s*/, ' ').replace(/\\\\\\\\\\\\\\\\s*photo-back\\\\\\\\\\\\\\\\s*/,'');
photos.push(_photos[i]);
}
var photo_center = g("#photo_" + n);
var nav_current = g("#nav_" + n);
photo_center.style.left = '';
photo_center.style.top = '';
photo_center.style['transform'] = '';
photo_center.style['-moz-transform'] = '';
nav_current.className += ' i_current ';
photo_center.className += ' photo_center ';
photos.splice(n,1);
photos_left = photos.splice(0, Math.ceil(photos.length / 2));
photos_right = photos;
var ranges = range();
for (s in photos_left) {
photos_left[s].style.left = random(ranges.left.x) + 'px';
photos_left[s].style.top = random(ranges.left.y) + 'px'
photos_left[s].style['transform'] = 'rotate(' + random([-150,150]) + 'deg)';
photos_left[s].style['-moz-transform'] = 'rotate(' + random([-150,150]) + 'deg)';
}
for (s in photos_right) {
photos_right[s].style.left = random(ranges.right.x) + 'px'
photos_right[s].style.top = random(ranges.right.y) + 'px'
photos_right[s].style['transform'] = 'rotate(' + random([-150,150]) + 'deg)';
}
console.log(photos_left.length, photos_right.length)
}
function range () {
var range = {
left : {
x : [],
y : []
},
right : {
x : [],
y : []
}
};
var photo = {
w : g(".photo")[0].clientWidth,
h : g(".photo")[0].clientHeight
}
var wrap = {
w : g("#wrap").clientWidth,
h : g("#wrap").clientHeight
}
range.wrap = wrap;
range.photo = photo;
range.left.x = [-photo.w/2, wrap.w/2-photo.w];
range.left.y = [-photo.h/2, wrap.h];
range.right.x = [wrap.w/2, wrap.w - photo.w/4];
range.right.y = range.left.y;
return range;
}
rsort(random([0,20]));
页面的图片和文本内容来自data.js，这个可以直接利用上篇文章的movielist.txt进行构造,源码+素材下载链接：http://pan.baidu.com/s/1bp9RELD 密码：jh15
