用js与css3实现画廊页面效果

作者: hopevow | 来源:发表于2016-10-17 15:42 被阅读406次

用js与css3实现画廊页面效果
初识前端
CSS3过渡
用js实现页面loading效果
js基础
Jquery高亮当前选中菜单
JavaScript入门（上）基础语法、数组、流程控制语句、函数
JavaScript 学习笔记
一个纯纯的html任务
点赞的两种实现效果

基于前一篇爬虫爬取的素材，完成一个酷炫的画廊效果页面

最终效果图:

最终效果图.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