很棒的带倒影图文卡片展览/相册

左右滑动轮播时，有一个首尾卡片相挤出入效果。

模板，教程

《three.js GLTF Animation Blending（分离的动画文件）》申请公开！

第三方库
作品简介 1580
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <link rel="stylesheet" href="https://tympanus.net/Tutorials/PhotoStack/css/style.css" type="text/css" media="screen" />
    <style>
        h1.title {
            text-indent: -9000px;
            background: transparent url(https://tympanus.net/Tutorials/PhotoStack/title.png) no-repeat top left;
            width: 640px;
            height: 52px;
            position: absolute;
            top: 15px;
            left: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h1 class="title">Beautiful Photo Stack Gallery with jQuery and CSS3</h1>
    </div>

<div id="ps_slider" class="ps_slider">
        <a class="prev disabled"></a>
        <a class="next disabled"></a>
        <div id="ps_albums">
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album1/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>The Night</h2><span>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity.Top Cat! The indisputable leader!</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album2/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Lovely Dreams</h2><span>Abundantly fowl of you'll fly moved i evening there whales creeping very kind green. Of have after lights saying.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album3/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Insane Art</h2><span>Also female divide fruitful wherein upon, fruitful great fourth likeness given subdue cattle deep abundantly set place night stars fill.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album4/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Prime Time</h2><span>And did the Countenance DivineShine forth upon our clouded hills? And was Jerusalem builded here among these dark Satanic Mills?</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album5/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>House, Baby!</h2><span>You can have all the faith you want in spirits, and the afterlife, and heaven and hell, but when it comes to this world, don't be an idiot.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album6/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Run away</h2><span>Without contraries is no progression. Attraction and repulsion, reason and energy, love and hate, are necessary to human existence.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album7/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Longing</h2><span>So hath under years itself seasons life divided signs light were god fruitful evening a. Fruitful.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album8/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Heartbreaks</h2><span>A light moving. Moved was abundantly created, over sixth above grass after grass.</span>
                </div>
            </div>
            <div class="ps_album" style="opacity:0;"><img src="https://tympanus.net/Tutorials/PhotoStack/albums/album9/thumb/thumb.jpg" alt="" />
                <div class="ps_desc">
                    <h2>Fearful Water</h2><span>If the doors of perception were cleansed everything would appear to man as it is, infinite.</span>
                </div>
            </div>
        </div>
    </div>

<script src="https://wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            /**
             * navR,navL are flags for controlling the albums navigation
             * first gives us the position of the album on the left
             * positions are the left positions for each of the 5 albums displayed at a time
             */
            var navR, navL = false;
            var first = 1;
            var positions = {
                '0': 0,
                '1': 170,
                '2': 340,
                '3': 510,
                '4': 680
            }
            var $ps_albums = $('#ps_albums');
            /**
             * number of albums available
             */
            var elems = $ps_albums.children().length;
            var $ps_slider = $('#ps_slider');

/**
             * let's position the albums on the right side of the window
             */
            var hiddenRight = $(window).width() - $ps_albums.offset().left;
            $ps_albums.children('div').css('left', hiddenRight + 'px');
            /**
             * move the first 5 albums to the viewport
             */
            $ps_albums.children('div:lt(5)').each(
                function(i) {
                    var $elem = $(this);
                    $elem.animate({
                        'left': positions[i] + 'px',
                        'opacity': 1
                    }, 800, function() {
                        if (elems > 5)
                            enableNavRight();
                    });
                }
            );

/**
             * next album
             */
            $ps_slider.find('.next').bind('click', function() {
                if (!$ps_albums.children('div:nth-child(' + parseInt(first + 5) + ')').length || !navR) return;
                disableNavRight();
                disableNavLeft();
                moveRight();
            });

/**
             * we move the first album (the one on the left) to the left side of the window
             * the next 4 albums slide one position, and finally the next one in the list
             * slides in, to fill the space of the first one
             */
            function moveRight() {
                var hiddenLeft = $ps_albums.offset().left + 163;

/**
             * previous album
             */
            $ps_slider.find('.prev').bind('click', function() {
                if (first == 1 || !navL) return;
                disableNavRight();
                disableNavLeft();
                moveLeft();
            });

/**
             * we move the last album (the one on the right) to the right side of the window
             * the previous 4 albums slide one position, and finally the previous one in the list
             * slides in, to fill the space of the last one
             */
            function moveLeft() {
                var hiddenRight = $(window).width() - $ps_albums.offset().left;

/**
             * disable or enable albums navigation
             */
            function disableNavRight() {
                navR = false;
                $ps_slider.find('.next').addClass('disabled');
            }

function disableNavLeft() {
                navL = false;
                $ps_slider.find('.prev').addClass('disabled');
            }

function enableNavRight() {
                navR = true;
                $ps_slider.find('.next').removeClass('disabled');
            }

function enableNavLeft() {
                navL = true;
                $ps_slider.find('.prev').removeClass('disabled');
            }

/**
             * when hovering each one of the images,
             * we show the button to navigate through them
             */
            $ps_container.live('mouseenter', function() {
                $('#ps_next_photo').show();
            }).live('mouseleave', function() {
                $('#ps_next_photo').hide();
            });

/**
             * navigate through the images:
             * the last one (the visible one) becomes the first one.
             * we also rotate 0 degrees the new visible picture
             */
            $('#ps_next_photo').bind('click', function() {
                var $current = $ps_container.find('img:last');
                var r = Math.floor(Math.random() * 41) - 20;

var currentPositions = {
                    marginLeft: $current.css('margin-left'),
                    marginTop: $current.css('margin-top')
                }
                var $new_current = $current.prev();

$current.animate({
                    'marginLeft': '250px',
                    'marginTop': '-385px'
                }, 250, function() {
                    $(this).insertBefore($ps_container.find('img:first'))
                        .css({
                            '-moz-transform': 'rotate(' + r + 'deg)',
                            '-webkit-transform': 'rotate(' + r + 'deg)',
                            'transform': 'rotate(' + r + 'deg)'
                        })
                        .animate({
                            'marginLeft': currentPositions.marginLeft,
                            'marginTop': currentPositions.marginTop
                        }, 250, function() {
                            $new_current.css({
                                '-moz-transform': 'rotate(0deg)',
                                '-webkit-transform': 'rotate(0deg)',
                                'transform': 'rotate(0deg)'
                            });
                        });
                });
            });

/**
             * close the images view, and go back to albums
             */
            $('#ps_close').bind('click', function() {
                $ps_container.hide();
                $ps_close.hide();
                $ps_overlay.fadeOut(400);
            });

/**
             * resize and center the images
             */
            function resizeCenterImage($image) {
                var theImage = new Image();
                theImage.src = $image.attr("src");
                var imgwidth = theImage.width;
                var imgheight = theImage.height;

var containerwidth = 460;
                var containerheight = 330;

if (imgwidth > containerwidth) {
                    var newwidth = containerwidth;
                    var ratio = imgwidth / containerwidth;
                    var newheight = imgheight / ratio;
                    if (newheight > containerheight) {
                        var newnewheight = containerheight;
                        var newratio = newheight / containerheight;
                        var newnewwidth = newwidth / newratio;
                        theImage.width = newnewwidth;
                        theImage.height = newnewheight;
                    } else {
                        theImage.width = newwidth;
                        theImage.height = newheight;
                    }
                } else if (imgheight > containerheight) {
                    var newheight = containerheight;
                    var ratio = imgheight / containerheight;
                    var newwidth = imgwidth / ratio;
                    if (newwidth > containerwidth) {
                        var newnewwidth = containerwidth;
                        var newratio = newwidth / containerwidth;
                        var newnewheight = newheight / newratio;
                        theImage.height = newnewheight;
                        theImage.width = newnewwidth;
                    } else {
                        theImage.width = newwidth;
                        theImage.height = newheight;
                    }
                }
                $image.css({
                    'width': theImage.width,
                    'height': theImage.height,
                    'margin-top': -(theImage.height / 2) - 10 + 'px',
                    'margin-left': -(theImage.width / 2) - 10 + 'px'
                });
            }
        });
    </script>
</body>

</html>

左右滑动轮播时，有一个首尾卡片相挤出入效果。

模板，教程

编辑器支持Emmet

快捷键

左右滑动轮播时，有一个首尾卡片相挤出入效果。

模板，教程

平面风格随意散开的图片展览/相册

使用CSS3实现手风琴风格的图片展览/相册

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：