當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库

發(fā)布時(shí)間：2023/12/14 CSS 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jquery 堆棧溢出

View demo 查看演示Download Source 下載源

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

在本教程中，我們將創(chuàng)建一個(gè)漂亮又新鮮的圖像庫(kù)。想法是將相冊(cè)顯示為滑塊，選擇相冊(cè)后，我們將其圖像顯示為漂亮的照片堆棧。在照片堆棧視圖中，我們可以通過(guò)使用平滑的動(dòng)畫將最上面的圖像放在所有堆棧后面來(lái)瀏覽圖像。

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

我們將使用jQuery和CSS3屬性來(lái)旋轉(zhuǎn)圖像效果。我們還將使用webkit-box-reflect屬性來(lái)鏡像相冊(cè)視圖中的框-在Google Chrome或Apple Safari中查看演示，以查看這種效果。

We will also use a bit of PHP for getting the images from each album.

我們還將使用一些PHP從每個(gè)專輯中獲取圖像。

So, let’s start!

所以，讓我們開始吧！

標(biāo)記 (The Markup)

In our HTML structure we will have several elements. The main ones are for the album columns with thumbnail and description, and the preview with the photo stack. The structure for the album view is going to look as follows:

在我們HTML結(jié)構(gòu)中，我們將包含幾個(gè)元素。主要的是帶有縮略圖和說(shuō)明的相冊(cè)列，以及帶有照片堆棧的預(yù)覽。相冊(cè)視圖的結(jié)構(gòu)如下所示：

<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="albums/album1/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>Album title</h2><span>Description text</span></div></div><div class="ps_album" style="opacity:0;">...</div>...</div> </div>

The opacity of the album div is going to be 0 in the beginning, we will then use JavaScript to fade in the columns. The information that we need to provide in the HTML is the location of each album and its thumbnail images. With our little PHP script we will then get all the images from the respective album.

專輯div的不透明度在開始時(shí)將為0，然后我們將使用JavaScript淡入各列。我們需要在HTML中提供的信息是每個(gè)相冊(cè)及其縮略圖的位置。使用我們的小型PHP腳本，我們將從相應(yīng)的相冊(cè)中獲取所有圖像。

The structure for the dark overlay and the preview with the photo stack is going to look like this:

深色疊加層和帶有照片堆棧的預(yù)覽的結(jié)構(gòu)將如下所示：

We will dynamically insert the pictures of each album into the ps_container div. Now, let’s take a look at the PHP.

我們將把每個(gè)專輯的圖片動(dòng)態(tài)插入ps_container div中。現(xiàn)在，讓我們看一下PHP。

PHP (The PHP)

Our PHP file will be called from our JavaScript and we will get the information with AJAX call. The PHP looks as follows:

我們PHP文件將從我們JavaScript中調(diào)用，我們將通過(guò)AJAX調(diào)用獲取信息。 PHP如下所示：

$location = 'albums'; $album_name = $_GET['album_name']; $files = glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE); $encoded = json_encode($files); echo $encoded; unset($encoded);

CSS(The CSS)

The style for the gallery is going to contain some CSS3 properties and also a Webkit specific property for a mirror effect. Let’s start by resetting some paddings and margins and defining the general style for the body:

畫廊的風(fēng)格將包含一些CSS3屬性，以及一個(gè)Webkit特定的屬性，以產(chǎn)生鏡像效果。讓我們首先重置一些填充和邊距，然后定義主體的常規(guī)樣式：

body, ul, li, h1, h2, h3{margin:0;padding:0; } body{background:#121212;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#fff;overflow-x:hidden; }

We will continue with the style of the preview. The overlay is going to have the following style:

我們將繼續(xù)預(yù)覽的樣式。疊加層將具有以下樣式：

.ps_overlay{z-index:90;background:#111;width:100%;height:100%;position:fixed;top:0px;left:0px;opacity:0.5; }

The container for the photo stack will have a defined height and width. We will position it absolutely and center it with the “50%/negative margins” method:

照片堆棧的容器將具有定義的高度和寬度。我們將對(duì)其進(jìn)行絕對(duì)定位，并使用“ 50％/負(fù)邊距”方法將其居中：

.ps_container{width:480px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-240px;z-index:100; }

The image will have a thick white border and a nice box shadow. We will center the image relatively to its container but since we will only know the width and height of the images once we dynamically add them, we will set the margins in our JavaScript function:

該圖像將具有一個(gè)粗的白色邊框和一個(gè)不錯(cuò)的框陰影。我們將圖像相對(duì)于其容器居中放置，但是由于一旦動(dòng)態(tài)添加圖像，我們將只知道圖像的寬度和高度，因此我們將在JavaScript函數(shù)中設(shè)置邊距：

.ps_container img{border:10px solid #fff;position:absolute;top:50%;left:50%;-moz-box-shadow:1px 1px 10px #000;-webkit-box-shadow:1px 1px 10px #000;box-shadow:1px 1px 10px #000; }

The close button for the preview is going to be fixed at the top right of the window:

預(yù)覽的關(guān)閉按鈕將固定在窗口的右上方：

a.ps_close{background:#000 url(../images/close.png) no-repeat center center;cursor:pointer;width:56px;height:56px;position:fixed;right:10px;top:10px;z-index:1000;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; opacity:0.6; }

We will show a “next photo” element on top of the current image when the user hovers over it:

當(dāng)用戶將鼠標(biāo)懸停在當(dāng)前圖像上方時(shí)，我們將在其上方顯示“下一張照片”元素：

a.ps_next_photo{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:200;cursor:pointer;background:#000 url(../images/next_photo.png) no-repeat 50% 50%;opacity:0.6;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; }

The hover classes for the last two elements:

最后兩個(gè)元素的懸停類：

a.ps_next_photo:hover, a.ps_close:hover{opacity:0.8; }

Now we are going to define the style for the album view and its columns. The slider container will be positioned relatively. With the auto values for the left and right margins we center the container horizontally on the page:

現(xiàn)在，我們將定義相冊(cè)視圖及其列的樣式。滑塊容器將相對(duì)放置。使用左右邊距的自動(dòng)值，我們將容器在頁(yè)面上水平居中：

.ps_slider{width:845px;height:300px;position:relative;margin:110px auto 0px auto; }

The navigation elements are going to have the following style:

導(dǎo)航元素將具有以下樣式：

.ps_slider a.next, .ps_slider a.prev{position:absolute;background-color:#000;background-position:center center;background-repeat:no-repeat;border:1px solid #232323;width:20px;height:20px;top:50%;margin-top:-10px;opacity:0.6;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;outline:none; } .ps_slider a.prev{left:-30px;background-image:url(../images/prev.png); } .ps_slider a.next{right:-30px;background-image:url(../images/next.png); } .ps_slider a.prev:hover, .ps_slider a.next:hover{border:1px solid #333;opacity:0.9; }

We also define a class for the navigation elements when they are disabled:

當(dāng)禁用導(dǎo)航元素時(shí)，我們還定義了一個(gè)類：

.ps_slider a.disabled, .ps_slider a.disabled:hover{opacity:0.4;border:1px solid #111;cursor:default; }

Each album column is going to have the following style:

每個(gè)相冊(cè)列將具有以下樣式：

.ps_slider .ps_album{width:140px;height:310px;padding:10px;background-color:#333;border:1px solid #444;position:absolute;top:0px;text-align:center;cursor:pointer;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgb(18, 18, 18))); }

The last property is the Webkit box reflex that mirrors the columns. We say that it should mirror the element in a gradient like way.

最后一個(gè)屬性是對(duì)列進(jìn)行鏡像的Webkit框反射。我們說(shuō)它應(yīng)該像漸變一樣鏡像元素。

We add a hover class for the whole column:

我們?yōu)檎麄€(gè)列添加一個(gè)懸停類：

.ps_slider .ps_album:hover{background-color:#383838; }

The thumbnail image and the content of the column are going to have the following styles:

縮略圖和列內(nèi)容將具有以下樣式：

.ps_slider .ps_album img{height:90px;border:1px solid #444;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000; } .ps_slider .ps_album .ps_desc{display:block;color:#666;background:#111 url(../images/overlay.png) no-repeat bottom right;height:200px;margin-top:10px;text-align:left;line-height:20px;overflow:hidden;text-overflow:ellipsis;border:1px solid #393939;-moz-box-shadow:0px 0px 2px #000 inset;-webkit-box-shadow:0px 0px 2px #000 inset;box-shadow:0px 0px 2px #000 inset; } .ps_slider .ps_album:hover .ps_desc{background-image:none; } .ps_slider .ps_album .ps_desc span{display:block;margin:0px 10px 10px 10px;border-top:1px solid #333;padding-top:5px; } .ps_slider .ps_album .ps_desc h2{margin:10px 10px 0px 10px;text-align:left;padding-bottom:5px;font-weight:normal;color:#ddd;text-shadow:0px 0px 1px #fff;border-bottom:1px solid #000; }

The loading element will show when we click on an album and all the images get loaded in the preview:

當(dāng)我們單擊相冊(cè)并且所有圖像都加載到預(yù)覽中時(shí)，將顯示loading元素：

.ps_slider .loading{background:#121212 url(../images/loading.gif) no-repeat 50% 50%;position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0.7; }

For the opacity to work in IE you need to add this filter (with the right value): filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); I did not want to uglify the code.

為了使opacity在IE中工作，您需要添加以下過(guò)濾器(具有正確的值)： filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 我不想丑化代碼。

Let’s add the magic!

讓我們添加魔法！

JavaScript (The JavaScript)

First, we need to define some variables that help us control the album navigation and keep some elements. The variable positions saves the left value for each album column. This depends on the width of the column.

首先，我們需要定義一些變量來(lái)幫助我們控制專輯導(dǎo)航并保留一些元素。可變位置保存每個(gè)專輯列的左側(cè)值。這取決于列的寬度。

/** * 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');

We are going to give an initial positioning to the album columns:

我們將對(duì)相冊(cè)列進(jìn)行初始定位：

/** * position all 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();});} );

For sliding through the albums, we will define what happens when we click on the next or previous button and create two functions for moving left or right:

為了瀏覽專輯，我們將定義當(dāng)單擊下一個(gè)或上一個(gè)按鈕并創(chuàng)建兩個(gè)左右移動(dòng)功能時(shí)發(fā)生的情況：

/** * 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;var cnt = 0;$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){var $this = $(this);$ps_albums.children('div').slice(first,parseInt(first+4)).each(function(i){var $elem = $(this);$elem.animate({'left': positions[i] + 'px'},800,function(){++cnt;if(cnt == 4){$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){//$this.hide();++first;if(parseInt(first + 4) < elems)enableNavRight();enableNavLeft();});} });}); }); }/** * 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;var cnt = 0;var last= first+4;$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){var $this = $(this);$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(function(i){var $elem = $(this);$elem.animate({'left': positions[i+1] + 'px'},800,function(){++cnt;if(cnt == 4){$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){//$this.hide();--first;enableNavRight();if(first > 1)enableNavLeft();});} });});}); }

The next helper functions deal with disabling and enabling the the navigation items:

下一個(gè)幫助程序功能用于禁用和啟用導(dǎo)航項(xiàng)：

/** * 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'); }

In the next steps we will define what happens when we open an album. We first make the loading element appear and show the preview after we loaded all the images. The information of the source comes from an AJAX call to our PHP class. For the rotation effect, we use the rotate CSS3 property which we restrict to a certain range of degrees, so that we don’t rotate an image crazily:

在接下來(lái)的步驟中，我們將定義打開專輯時(shí)發(fā)生的情況。我們首先顯示loading元素，并在加載所有圖像后顯示預(yù)覽。來(lái)源信息來(lái)自對(duì)我們PHP類的AJAX調(diào)用。為了獲得旋轉(zhuǎn)效果，我們使用了我們將旋轉(zhuǎn)CSS3屬性限制在一定程度的范圍內(nèi)，這樣我們就不會(huì)瘋狂旋轉(zhuǎn)圖像了：

The nice animation of putting the current image at the back of our stack is defined in the following:

下面定義了將當(dāng)前圖像放在堆棧后面的漂亮動(dòng)畫：

/** * 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)'});});}); });

We animate the top and left margins with certain values that create the “putting back” effect. Since our structure always shows the last image on the top, we will also need to insert the moving image at the beginning, so that it appear as last one in the stack.

我們使用某些值為頂部和左邊距設(shè)置動(dòng)畫，以創(chuàng)建“推回”效果。由于我們的結(jié)構(gòu)始終將最后一個(gè)圖像顯示在頂部，因此我們還需要在開頭插入運(yùn)動(dòng)圖像，以使它在堆棧中顯示為最后一個(gè)圖像。

Clicking on the close element brings us back to the album view:

單擊關(guān)閉元素可將我們帶回到相冊(cè)視圖：

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

Our famous resize function resizes the image according to the given container width and height. In the end of the function we apply the sizes and we also apply the negative margins – remember, that’s the way we can center an absolute positioned element; we defined top and left in the CSS to be 50%, so now we need to pull it to the right place with these margin values.

我們著名的調(diào)整大小功能根據(jù)給定的容器寬度和高度調(diào)整圖像大小。在函數(shù)的最后，我們應(yīng)用尺寸，并且我們也應(yīng)用負(fù)邊距–請(qǐng)記住，這是我們使絕對(duì)定位的元素居中的方式。我們將CSS中的上下定義為50％，因此現(xiàn)在我們需要使用這些邊距值將其拉到正確的位置。

/** * 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' }); } });

And that’s it! We hope you enjoyed this tutorial and find it useful!

就是這樣！我們希望您喜歡本教程并發(fā)現(xiàn)它有用！

P.S. Because of some Webkit properties, this demo is a really nice experience if you use a Webkit browser like Chrome or Safari. It will also be fully functional in all latest browsers like Firefox and IE (without those beautiful properties, though).

PS由于具有Webkit的某些屬性，因此，如果您使用的是Chrome或Safari等Webkit瀏覽器，則此演示非常不錯(cuò)。它也將在所有最新的瀏覽器(如Firefox和IE)中完全發(fā)揮作用(盡管沒(méi)有這些漂亮的屬性)。

testking RH302 training with testking 646-671視頻教程和testking 646-671 video tutorials and testking 70-643指南提供專業(yè)的testking 70-643 guide to help the designers learn how to create beautiful website designs using Jquery and css.testking RH302培訓(xùn)，以幫助設(shè)計(jì)人員學(xué)習(xí)如何使用Jquery和CSS創(chuàng)建漂亮的網(wǎng)站設(shè)計(jì)。

翻譯自: https://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/

jquery 堆棧溢出

總結(jié)

以上是生活随笔為你收集整理的jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： java中接口幂等性解决方案总结
下一篇： html九宫格布局原理,了解CSS九宫格