jquery读取cookie jquery读取数据库图片_jquery读取cookie


jquery读取数据库图片


jquery读取cookie jquery读取数据库图片_css_02


View demo 查看演示 Download Source 下载源


In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

在本教程中，我们将创建一个令人惊叹的全页画廊，其中包含可滚动的缩略图和可滚动的全屏预览。 想法是在页面底部有一个缩略图栏，当用户移动鼠标时该栏会自动滚动。 单击缩略图后，它将移动到页面的中心，并且全屏图像将被加载到背景中。 现在，用户可以上下移动，并且图像将自动滚动，从而使他有机会看到所有图像。

We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality. That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.

我们将使用一些CSS3 Webkit属性来增强外观和jQuery的功能。 这就是为什么最好在Webkit浏览器(例如Google Chrome或Apple Safari)中观看该演示的原因。

We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!

我们将使用Malihu出色的jQuery缩略图滚动器。 非常感谢他的出色而流畅的脚本！

Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.

再次，我们将展示Mark Sebastian的精彩摄影作品。 请访问他的Flickr页面或他的主页以获取有关他的工作的更多信息。 我们将使用的图像来自Flickr上的“ IT因素”照片集。

So, let’s begin!

所以，让我们开始吧！

(The Markup)

The HTML consists of a main wrapper div for the gallery. Inside of that wrapper we will have the full screen image, an overlay for a nice halftone pattern effect, a loading div, the navigation items and the thumbnails bar:

HTML由图库的主包装div组成。 在该包装内，我们将拥有全屏图像，一个漂亮的半色调图案效果的叠加层，一个加载div，导航项和缩略图栏： 

<div id="fp_gallery" class="fp_gallery">
	<img src="images/1.jpg" alt="" id="preview" class="fp_preview" style="display:none;"/>
	<div class="fp_overlay"></div>
	<div id="fp_loading" class="fp_loading"></div>
	<div id="fp_next" class="fp_next"></div>
	<div id="fp_prev" class="fp_prev"></div>
	<div id="outer_container">
		<div id="thumbScroller">
			<div class="container">
				<div class="content">
					<div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
				</div>
				<div class="content">
					<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
				</div>
				...
			</div>
		</div>
	</div>
	<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
</div>

We will also add a “View Thumbnails” div that will appear when the thumbnails are hidden. We are using (abusing) the alt attribute of the image to keep the path to the full image. Let’s take a look at the style.

我们还将添加一个“查看缩略图” div，该缩略图将在隐藏缩略图时出现。 我们正在使用(滥用)图片的alt属性来保留通往完整图片的路径。 让我们看一下样式。

(The CSS)

First, we will reset the style and define some main properties for the body:

首先，我们将重置样式并为主体定义一些主要属性： 

*{
	margin:0;
	padding:0;
}
body {
	background:#212121;
	overflow:hidden;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	font-size:10px;
}

In the following, we will define the style for the scrollable thumbs container. Most of the style is adapted from Malihu’s thumbnail scroller. We just edited some padding and margins and added a webkit reflection to the whole container:

在下面，我们将定义可滚动缩略图容器的样式。 大多数样式均改编自Malihu的缩略图滚动器。 我们只是编辑了一些填充和边距，并向整个容器添加了一个webkit反射： 

#outer_container{
	position:fixed;
	bottom:-160px;
	margin:0px 0px 30px 0px;
	height:130px;
	padding:0;
	-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 bottom value of the container is negative in order to hide the thumbnails bar. When we load the page, we show the bar.

容器的底值为负数，以便隐藏缩略图栏。 加载页面时，显示栏。

The following classes define the style of the inner elements of the thumbnail container:

以下类定义缩略图容器内部元素的样式： 

#thumbScroller{
	position:relative;
	overflow:hidden;
}
#thumbScroller .container{
	position:relative;
	left:0;
}
#thumbScroller .content{
	float:left;
}
#thumbScroller .content div{
	margin:2px;
	height:100%;
}

The thumbnail images are going to have a thick white border and we will restrict their height to 120px:

缩略图将具有白色的粗边框，我们将其高度限制为120px： 

#thumbScroller img,
img.clone{
	border:5px solid #fff;
	height:120px;
}
#thumbScroller a{
	padding:2px;
	outline:none;
}

The halftone pattern is shown by the overlay element which will be stretched over all the screen and move when we scroll since it is fixed:

半色调图案由overlay元素显示，该元素将被固定在整个屏幕上并在滚动时移动，因为它是固定的： 

.fp_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/icons/pattern2.png) repeat-x bottom left;
}

The loading div will appear whenever we click on an image and wait for the full image to load. It will be centered on the screen with the help of the “50% trick”:

每当我们单击图像并等待完整图像加载时，就会显示加载div。 借助“ 50％技巧”，它将在屏幕上居中： 

.fp_loading{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	margin:-35px 0px 0px -35px;
	background:#000 url(../images/icons/loader.gif) no-repeat center center;
	width:70px;
	height:70px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	z-index:999;
	opacity:0.7;
}

The navigation elements will be styled as follows:

导航元素的样式如下： 

.fp_next,
.fp_prev{
	width:50px;
	height:50px;
	position:fixed;
	top:50%;
	margin-top:-15px;
	cursor:pointer;
	opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
	opacity:0.9;
}
.fp_next{
	background:#000 url(../images/icons/next.png) no-repeat center center;
	right:-50px;
}
.fp_prev{
	background:#000 url(../images/icons/prev.png) no-repeat center center;
	left:-50px;
}

While the navigation items will be positioned to the left and right and centered vertically, we will position the toggle item at the bottom of the page, centered horizontally:

导航项将定位在左右两侧并垂直居中时，我们将切换项放置在页面底部并水平居中： 

.fp_thumbtoggle{
	height:50px;
	background:#000;
	width:200px;
	text-align:center;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #000;
	position:fixed;
	left:50%;
	margin-left:-100px;
	bottom:-50px;
	line-height:50px;
	cursor:pointer;
	opacity:0.8;
}
.fp_thumbtoggle:hover{
	opacity:1.0;
}

Hovering a div will not work in every browser and can also be done with jQuery.

悬停div并非在所有浏览器中都有效，也可以使用jQuery完成。

And finally, the style for the full image. Here we set the width to be always 100%, filling out the complete screen. This might make the image look pixelated on large screens but we have our halftone pattern to reduce the effect 🙂

最后，是完整图像的样式。 在这里，我们将宽度设置为始终为100％，以填充整个屏幕。 这可能会使图像在大屏幕上看起来像素化，但是我们使用半色调图案来减少效果🙂 

img.fp_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

Now, let’s do some magic!

现在，让我们做一些魔术！

(The JavaScript)

In the head of our HTML document we will add the jQuery thumbnail scroller by Malihu. We will be using the full size, horizontal scroller with easing. That’s why we also need to include the easing script after the inclusion of the jQuery script.

在HTML文档的开头，我们将添加Malihu的jQuery缩略图滚动器。 我们将使用具有缓动功能的全尺寸水平滚动条。 这就是为什么我们还需要在包含jQuery脚本之后包含easing脚本。

In our jQuery function we will first define some variables:

在我们的jQuery函数中，我们将首先定义一些变量： 

//current thumb's index being viewed
var current			= -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader		= $('#fp_loading');
var $btn_next		= $('#fp_next');
var $btn_prev		= $('#fp_prev');
var $thumbScroller	= $('#thumbScroller');

Then we will call the function showThumbs which will make the thumbnail container appear from the bottom of the page:

然后，我们将调用showThumbs函数，该函数将使缩略图容器从页面底部出现： 

showThumbs(2000);

Next, we will make the whole page scrollable vertically on mouse move. When a full sized image is loaded, we want this functionality to be available:

接下来，我们将使整个页面在鼠标移动时垂直滚动。 加载完整尺寸的图像后，我们希望此功能可用： 

makeScrollable();

When we click on a thumbnail, a lot of things are going to happen. First, we will create a clone of the current thumbnail which will then move to the center of the page. Then we will load the full sized image and when it finished loading, we want the clone thumbnail to expand and fade out. We will also hide the thumbnails and show the “View thumbnails” button:

当我们单击缩略图时，将会发生很多事情。 首先，我们将创建当前缩略图的克隆，然后将其移动到页面的中央。 然后，我们将加载完整尺寸的图像，并在完成加载后，希望克隆缩略图扩展并淡出。 我们还将隐藏缩略图并显示“查看缩略图”按钮： 

$thumbScroller.find('.content').bind('click',function(e){
	var $content= $(this);
	var $elem 	= $content.find('img');
	//keep track of the current clicked thumb
	//it will be used for the navigation arrows
	current 	= $content.index()+1;
	//get the positions of the clicked thumb
	var pos_left 	= $elem.offset().left;
	var pos_top 	= $elem.offset().top;
	//clone the thumb and place
	//the clone on the top of it
	var $clone 	= $elem.clone()
	.addClass('clone')
	.css({
		'position':'fixed',
		'left': pos_left + 'px',
		'top': pos_top + 'px'
	}).insertAfter($('BODY'));

	var windowW = $(window).width();
	var windowH = $(window).height();

	//animate the clone to the center of the page
	$clone.stop()
	.animate({
		'left': windowW/2 + 'px',
		'top': windowH/2 + 'px',
		'margin-left' :-$clone.width()/2 -5 + 'px',
		'margin-top': -$clone.height()/2 -5 + 'px'
	},500,
	function(){
		var $theClone 	= $(this);
		var ratio		= $clone.width()/120;
		var final_w		= 400*ratio;

		$loader.show();

		//expand the clone when large image is loaded
		$('<img class="fp_preview"/>').load(function(){
			var $newimg 		= $(this);
			var $currImage 	= $('#fp_gallery').children('img:first');
			$newimg.insertBefore($currImage);
			$loader.hide();
			//expand clone
			$theClone.animate({
				'opacity'		: 0,
				'top'			: windowH/2 + 'px',
				'left'			: windowW/2 + 'px',
				'margin-top'	: '-200px',
				'margin-left'	: -final_w/2 + 'px',
				'width'			: final_w + 'px',
				'height'		: '400px'
			},1000,function(){$(this).remove();});
			//now we have two large images on the page
			//fadeOut the old one so that the new one gets shown
			$currImage.fadeOut(2000,function(){
				$(this).remove();
			});
			//show the navigation arrows
			showNav();
		}).attr('src',$elem.attr('alt'));
	});
	//hide the thumbs container
	hideThumbs();
	e.preventDefault();
});

When we click on the “View thumbnails” button, we will show the thumbnails container and hide the button and the navigation elements:

当我们单击“查看缩略图”按钮时，我们将显示缩略图容器，并隐藏该按钮和导航元素： 

$btn_thumbs.bind('click',function(){
	showThumbs(500);
	hideNav();
});

function hideThumbs(){
	$('#outer_container').stop().animate({'bottom':'-160px'},500);
	showThumbsBtn();
}

function showThumbs(speed){
	$('#outer_container').stop().animate({'bottom':'0px'},speed);
	hideThumbsBtn();
}

function hideThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'-50px'},500);
}

function showThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'0px'},500);
}

function hideNav(){
	$btn_next.stop().animate({'right':'-50px'},500);
	$btn_prev.stop().animate({'left':'-50px'},500);
}

function showNav(){
	$btn_next.stop().animate({'right':'0px'},500);
	$btn_prev.stop().animate({'left':'0px'},500);
}

The events for navigating through the set of images once one is loaded:

加载一组图像后浏览的事件： 

$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);

The next two functions will load the previous or next image and place it before the current one which will fade out:

接下来的两个函数将加载上一个或下一个图像，并将其放置在当前图像之前，该图像将逐渐消失： 

function showNext(){
	++current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = 1;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

function showPrev(){
	--current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = $thumbScroller.find('.content').length;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

And finally, the makeScrollable function which will make the page scroll when the user moves the mouse up or down:

最后，makeScrollable函数将在用户上下移动鼠标时使页面滚动： 

function makeScrollable(){
	$(document).bind('mousemove',function(e){
		var top = (e.pageY - $(document).scrollTop()/2) ;
		$(document).scrollTop(top);
	});
}

And that’s it! Don’t forget to view the demo in a Webkit browser – especially in Safari you will have a divine smoothness.

就是这样！ 别忘了在Webkit浏览器中查看演示-尤其是在Safari中，您将拥有神圣的流畅度。

We hope you liked the tutorial and the result!

我们希望您喜欢本教程及其结果！


testking E20-001 tutorials and testking E20-001教程和 testking 646-563 videos with step by step testking 646-563视频，以及逐步的 testking 70-685 study guides to learn how to create inspiring web images. testking 70-685学习指南，以学习如何创建具有启发性的Web图像。


翻译自: https://tympanus.net/codrops/2010/09/08/full-page-image-gallery/

jquery读取数据库图片