jquery和css3创建图片墙

今天,我们要向您展示如何创建一个整洁的形象墙与jQuery。这个想法是为了分散一些缩略图页面上的大小不同,丝带下滑,当我们点击图片。旁边的丝带将显示一些描述图片,当再次点击缩略图,丝带将再次关闭和打开一个大版本的形象。

HTML结构相当简单:我们为无序列表将包装图片和它们的描述和丝带元素,我们将添加一个关闭跨度和帮助文本跨越:Description Heading
Some description text...
...
        ...
Click thumb to zoom“data-img”会告诉我们完整的图片的路径将动态地插入到丝带div。
让我们看一看风格。

CSS
首先,我们将定义包装器的风格。我们希望它是集中在页面上,有一个宽度适应窗口大小的,所以我们给它的宽度为70%:

.iw_wrapper{
    width:70%;
    margin:30px auto 100px auto;
    position:relative;
}
因为我们将使用砖石插件最小化垂直图像之间的差距时,我们将有一个整洁的重新定位动画即改变窗口的大小。
接下来,我们将定义列表元素的风格。(我认为你是其中一些css重置将无序列表的利润率和填充为0)。
默认情况下我们希望所有列表元素的保证金5 px和浮动:
ul.iw_thumbs li{
    float:left;
    margin:5px;
}
绝对描述将被放置在我们的JavaScript函数将决定离开定位(这将是-200 px为了显示左图像或图像的宽度,以显示正确的):ul.iw_thumbs li div{
    position:absolute;
    top:5px;
    width:180px;
    padding:0px 10px;
    display:none;
    color:#fff;
    z-index:100;
}
标题和文本:
ul.iw_thumbs li div h2{
    font-family: 'Wire One', arial, serif;
    font-size:38px;
    text-transform:uppercase;
    text-shadow:0px 0px 1px #fff;
}
ul.iw_thumbs li div p{
    font-size:11px;
    line-height:16px;
    font-style:italic;
}
图片会有厚厚的白色的边境和一些盒阴影:
ul.iw_thumbs li img{
    border:7px solid #fff;
    cursor:pointer;
    position:relative;
    -moz-box-shadow:1px 1px 1px #aaa;
    -webkit-box-shadow:1px 1px 1px #aaa;
    box-shadow:1px 1px 1px #aaa;
}
ul.iw_thumbs li img:hover{
    -moz-box-shadow:1px 1px 7px #777;
    -webkit-box-shadow:1px 1px 7px #777;
    box-shadow:1px 1px 7px #777;
}
现在我们想添加一些混乱元素和图像列表。我们将调整的一些列表元素通过选择特定的孩子。我们在第一个列表元素,我们添加一个50 px margin-left:
ul.iw_thumbs li:nth-child(1){
    margin-left:50px;
}
然后我们甚至把所有的列表元素,给他们一个不同的顶边:
ul.iw_thumbs li:nth-child(even){
    margin-top:30px;
}
剩下3的倍数将20px:
ul.iw_thumbs li:nth-child(3n){
    margin-left:20px;
}
现在我们将玩图像的高度。这样我们会给整个墙分散,避免使它看起来像一个无聊的网格。我们也想让图片有点小或大,因为我们想推动他们带的高度,当我们点击它们。所以这将增加一个有趣的效果,因为有些图片将增长和一些将会收缩:
ul.iw_thumbs li:nth-child(even) img{
    height:20px;
}
ul.iw_thumbs li:nth-child(odd) img{
    height:40px;
}
ul.iw_thumbs li:nth-child(5n) img{
    height:70px;
}
ul.iw_thumbs li:nth-child(6n) img{
    height:110px;
}
ul.iw_thumbs li:nth-child(7n) img{
    height:20px;
}
丝带将固定元素,将滑动从左边或者右边根据缩略图定位。宽度为0开始,我们将推动它到100%。
.iw_ribbon{
    position:fixed;
    height:126px;
    width:0px;
    left:0px;
    top:0px; 
    background:#000;
    opacity:0.8;
    z-index:10;
    overflow:hidden;
    display:none;
}
关闭和缩放文本将有以下方式:
.iw_close{
    position:absolute;
    top:10px;
    right:10px;
    background:#f0f0f0 url(../images/close.gif) no-repeat center center;
    width:18px;
    height:18px;
    display:none;
    cursor:pointer;
}
.iw_zoom{
    color:white;
    font-size:8px;
    font-family:Arial, sans-serif;
    text-transform:uppercase;
    padding:14px;
    display:none;
    float:right;
    margin-right:30px;
}
当我们点击缩略图,而在“带状模式”,我们希望最大的形象出现在带,然后我们会扩大丝带,以揭示的。所以我们将动态图像添加到我们的丝带和应用以下方式:
.iw_ribbon img{
    position:absolute;
    top:50%;
    left:50%;
    border:7px solid #fff;
}
我们想要的图像集中,所以我们添加一个顶部和左50%和定义动态负利润一旦我们知道图像的大小。利润需要负面图像的宽度和高度的一半。
最后,我们定义了一个元素的加载跨风格,我们将动态添加到列表元素,以表明大图像加载:
.iw_loading{
    background: #fff url(../images/loader.gif) no-repeat center center;
    width:28px;
    height:28px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
    margin: -14px 0px 0px -14px;
    opacity:0.8;
}


JAVASCRIPT
让我们首先缓存一些元素,然后定义功能:
var $iw_thumbs          = $('#iw_thumbs'),
    $iw_ribbon          = $('#iw_ribbon'),
    $iw_ribbon_close    = $iw_ribbon.children('span.iw_close'),
    $iw_ribbon_zoom     = $iw_ribbon.children('span.iw_zoom');
 
    ImageWall   = (function() {
     ...
    })();
 
ImageWall.init();
在我们的功能我们将首先定义一些变量:
// window width and height
var w_dim,
    // index of current image
    current             = -1,
    isRibbonShown       = false,
    isFullMode          = false,
    // ribbon / images animation settings
    ribbonAnim          = {speed : 500, easing : 'easeOutExpo'},
    imgAnim             = {speed : 400, easing : 'jswing'},
接下来,我们将定义将首先调用init函数,砌体插件,计算窗口尺寸和初始化一些事件:
init                = function() {
    $iw_thumbs.imagesLoaded(function(){
        $iw_thumbs.masonry({
            isAnimated  : true
        });
    });
    getWindowsDim();
    initEventsHandler();
},
“getWindowsDim”将得到窗口的尺寸:
getWindowsDim       = function() {
        w_dim = {
            width   : $(window).width(),
            height  : $(window).height()
        };
    },
然后我们将定义一些事件的初始化,如点击缩略图,丝带的关闭和窗口大小:
initEventsHandler   = function() {
 
    // click on a image
    $iw_thumbs.delegate('li', 'click', function() {
        if($iw_ribbon.is(':animated')) return false;
 
        var $el = $(this);
 
        if($el.data('ribbon')) {
            showFullImage($el);
        }
        else if(!isRibbonShown) {
            isRibbonShown = true;
 
            $el.data('ribbon',true);
 
            // set the current
            current = $el.index();
 
            showRibbon($el);
        }
    });
 
    // click ribbon close
    $iw_ribbon_close.bind('click', closeRibbon);
 
    // on window resize we need to recalculate the window dimentions
    $(window).bind('resize', function() {
                getWindowsDim();
                if($iw_ribbon.is(':animated'))
                    return false;
                closeRibbon();
             })
             .bind('scroll', function() {
                if($iw_ribbon.is(':animated'))
                    return false;
                closeRibbon();
             });
 
},
“showRibbon”将照顾的事情将会发生当我们显示带:
showRibbon          = function($el) {
        var $img    = $el.children('img'),
            $descrp = $img.next();
 
        // fadeOut all the other images
        $iw_thumbs.children('li').not($el).animate({opacity : 0.2}, imgAnim.speed);
 
        // increase the image z-index, and set the height to 100px (default height)
        $img.css('z-index', 100)
            .data('originalHeight',$img.height())
            .stop()
            .animate({
                height      : '100px'
            }, imgAnim.speed, imgAnim.easing);
 
        // the ribbon will animate from the left or right
        // depending on the position of the image
        var ribbonCssParam      = {
                top : $el.offset().top - $(window).scrollTop() - 6 + 'px'
            },
            descriptionCssParam,
            dir;
 
        if( $el.offset().left < (w_dim.width / 2) ) {
            dir = 'left';
            ribbonCssParam.left     = 0;
            ribbonCssParam.right    = 'auto';
        }
        else {
            dir = 'right';
            ribbonCssParam.right    = 0;
            ribbonCssParam.left     = 'auto';
        }
 
        $iw_ribbon.css(ribbonCssParam)
                  .show()
                  .stop()
                  .animate({width : '100%'}, ribbonAnim.speed, ribbonAnim.easing, function() {
                        switch(dir) {
                            case 'left' :
                                descriptionCssParam     = {
                                    'left'          : $img.outerWidth(true) + 'px',
                                    'text-align'    : 'left'
                                };
                                break;
                            case 'right' :  
                                descriptionCssParam     = {
                                    'left'          : '-200px',
                                    'text-align'    : 'right'
                                };
                                break;
                        };
                        $descrp.css(descriptionCssParam).fadeIn();
                        // show close button and zoom
                        $iw_ribbon_close.show();
                        $iw_ribbon_zoom.show();
                  });
 
    },
关闭丝带将激活一方的丝带或通过减少它的高度,“关闭”当我们在图像模式:

closeRibbon         = function() {
    isRibbonShown   = false
 
    $iw_ribbon_close.hide();
    $iw_ribbon_zoom.hide();
 
    if(!isFullMode) {
 
        // current wall image
        var $el         = $iw_thumbs.children('li').eq(current);
 
        resetWall($el);
 
        // slide out ribbon
        $iw_ribbon.stop()
                  .animate({width : '0%'}, ribbonAnim.speed, ribbonAnim.easing); 
 
    }
    else {
        $iw_ribbon.stop().animate({
            opacity     : 0.8,
            height      : '0px',
            marginTop   : w_dim.height/2 + 'px' // half of window height
        }, ribbonAnim.speed, function() {
            $iw_ribbon.css({
                'width'     : '0%',
                'height'    : '126px',
                'margin-top': '0px'
            }).children('img').remove();
        });
 
        isFullMode  = false;
    }
},
我们还需要照顾其他的事情发生,当我们关闭丝带,重置当前图像的z - index和淡出的描述:
resetWall           = function($el) {
    var $img        = $el.children('img'),
        $descrp     = $img.next();
 
    $el.data('ribbon',false);
 
    // reset the image z-index and height
    $img.css('z-index',1).stop().animate({
        height      : $img.data('originalHeight')
    }, imgAnim.speed,imgAnim.easing);
 
    // fadeOut the description
    $descrp.fadeOut();
 
    // fadeIn all the other images
    $iw_thumbs.children('li').not($el).animate({opacity : 1}, imgAnim.speed);                               
},
现在我们将定义发生了什么当我们想要显示完整的图片:
showFullImage       = function($el) {
    isFullMode  = true;
 
    $iw_ribbon_close.hide();
 
    var $img    = $el.children('img'),
        large   = $img.data('img'),
 
        // add a loading span on top of the image
        $loading = $('聽');
 
    $el.append($loading);
 
    // preload large image
    $('').load(function() {
        var $largeImage = $(this);
 
        $loading.remove();
 
        $iw_ribbon_zoom.hide();
 
        resizeImage($largeImage);
 
        // reset the current image in the wall
        resetWall($el);
 
        // animate ribbon in and out
        $iw_ribbon.stop().animate({
            opacity     : 1,
            height      : '0px',
            marginTop   : '63px' // half of ribbons height
        }, ribbonAnim.speed, function() {
            // add the large image to the DOM
            $iw_ribbon.prepend($largeImage);
 
            $iw_ribbon_close.show();
 
            $iw_ribbon.animate({
                height      : '100%',
                marginTop   : '0px',
                top         : '0px'
            }, ribbonAnim.speed);
        });
    }).attr('src',large);
 
},
最后,我们将会有一个调整函数的完整图像的大小,即我们希望它适合屏幕:
  resizeImage         = function($image) {
        var widthMargin     = 100,
            heightMargin    = 100,
 
            windowH         = w_dim.height - heightMargin,
            windowW         = w_dim.width - widthMargin,
            theImage        = new Image();
 
        theImage.src        = $image.attr("src");
 
        var imgwidth        = theImage.width,
            imgheight       = theImage.height;
 
        if((imgwidth >windowW) || (imgheight >windowH)) {
            if(imgwidth >imgheight) {
                var newwidth    = windowW,
                    ratio       = imgwidth / windowW,
                    newheight   = imgheight / ratio;
 
                theImage.height = newheight;
                theImage.width  = newwidth;
 
                if(newheight >windowH) {
                    var newnewheight    = windowH,
                        newratio        = newheight/windowH,
                        newnewwidth     = newwidth/newratio;
 
                    theImage.width      = newnewwidth;
                    theImage.height     = newnewheight;
                }
            }
            else {
                var newheight   = windowH,
                    ratio       = imgheight / windowH,
                    newwidth    = imgwidth / ratio;
 
                theImage.height = newheight;
                theImage.width  = newwidth;
 
                if(newwidth >windowW) {
                    var newnewwidth     = windowW,
                        newratio        = newwidth/windowW,
                        newnewheight    = newheight/newratio;
 
                    theImage.height     = newnewheight;
                    theImage.width      = newnewwidth;
                }
            }
        }
 
        $image.css({
            'width'         : theImage.width + 'px',
            'height'        : theImage.height + 'px',
            'margin-left'   : -theImage.width / 2 + 'px',
            'margin-top'    : -theImage.height / 2 + 'px'
        });                         
    };
 
return {init : init};
预览
立即下载（0.82 M）
转载
jquery和css3创建图片墙

Description Heading

标签 →

推荐下载

也许你还喜欢

绿色环境保护公益筹款网站模板

Ace - html5响应后台管理模板最新版本V1.3.3

html区块链电商手机app模板

带歌词qq音乐播放器网页源码

黑色html电影资讯博客网站模板

创意网站即将上线模板

带电商设计足球体育类网站HTML模板_Bootstrap体育网站HTML - Wikideo

数字电子产品销售商城前端模板

framwork7手机电商HTML5模板_移动端电子商务平台产品列表模板 - eCom
