图像突出显示和预览与jQuery（显示的图像）

在本教程中，我们将向您展示如何突出显示和预览集成在文章中或分布在页面上的图像。这是允许用户查看与某个上下文相关的图像的更大版本的好方法。我们将在延迟悬停的情况下突出显示图像，并提供预览模式，将屏幕上放大和居中图像的较大版本。

开始吧！

标记

对于HTML结构，我们只需要考虑图像及其类。该图像可以放置在您的网站的任何地方：

<img src = “images / thumbs / 1.jpg” alt = “images / 1.jpg” class = “ih_image” />

我们使用alt属性将引用添加到较大的图像。

我们还将在正文结束之前添加一个叠加元素：

< div id = “ih_overlay” class = “ih_overlay” style = “display：none;” > </ div >

我们将用JavaScript创建的结构如下所示：

<div id="ih_clone" class="ih_image_clone_wrap">
<span class="ih_close"></span>
<img class="preview" src="images/1.jpg"></div>

这个结构不会被放置在我们的HTML中 - 它将被动态创建。

现在，我们来看看风格。

CSS

首先，我们将定义覆盖的样式：

.ih_overlay{	position:fixed;	top:0px;	left:0px;	right:0px;	bottom:0px;	background:#000;	z-index:10;	opacity:0.9;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);}

filter属性用于在IE中应用透明度。为了始终显示，我们使覆盖层固定，即使我们滚动页面。

我们想要应用我们的效果的图像将具有以下样式：

img.ih_image{	margin:10px 0px;	position:relative;	-moz-box-shadow:1px 1px 4px #000;	-webkit-box-shadow:1px 1px 4px #000;	box-shadow:1px 1px 4px #000;	opacity:0.7;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

这很简单，我们只是添加一些盒子阴影。

在我们的JavaScript中，我们将创建一个包含我们所徘徊的图像的克隆的包装器。它将获得与当前图像相同的位置。这就是为什么我们不在这里定义顶部和左侧，而是动态地在JS中。

.ih_image_clone_wrap{	position:absolute;	z-index:11;}

我们还将添加一些图标，可以显示放大镜，加载图像或十字的跨度。我们定义所有的共同属性如下：

.ih_image_clone_wrap span.ih_zoom,.ih_image_clone_wrap span.ih_loading,.ih_image_clone_wrap span.ih_close{	position:absolute;	top:10px;	right:10px;	width:24px;	height:24px;	-moz-border-radius:6px;	-webkit-border-radius:6px;	border-radius:6px;	opacity:0.8;	cursor:pointer;	-moz-box-shadow:1px 1px 2px #000;	-webkit-box-shadow:1px 1px 2px #000;	box-shadow:1px 1px 2px #000;	z-index:999;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}

每个类的具体属性，如背景，将被定义如下：

.ih_image_clone_wrap span.ih_zoom{	background:#000 url(../icons/zoom.png) no-repeat center center;}.ih_image_clone_wrap span.ih_loading{	background:#000 url(../icons/loader.gif) no-repeat center center;}.ih_image_clone_wrap span.ih_close{	background:#000 url(../icons/close.png) no-repeat center center;}.ih_image_clone_wrap img{	opacity:0.7;	-moz-box-shadow:1px 1px 10px #000;	-webkit-box-shadow:1px 1px 10px #000;	box-shadow:1px 1px 10px #000;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

我们将在缩略图上加载的全尺寸图像将具有以下样式：

.ih_image_clone_wrap img.preview{	opacity:1;	position:absolute;	top:0px;	left:0px;}

现在，让我们添加一些魔法！

JavaScript

在我们的jQuery函数中，我们将首先定义一个变量来控制高亮效果的时间。

当我们将鼠标悬停在具有特定类的图像上时，我们使用类ih_image_clone_wrap创建div，并通过获取当前图像的位置来定义其位置。

/*** timeout to control the display of the overlay/highlight*/var highlight_timeout;/*** user hovers one image:* create a absolute div with the same image inside,* and append it to the body*/$('img.ih_image').bind('mouseenter',function () {		var $thumb = $(this);
var $clone = $('<div />',{			'id'		: 'ih_clone',			'className'	: 'ih_image_clone_wrap',			'html' 	: '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',			'style'		: 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});
var highlight = function (){
$('#ih_overlay').show();
$('BODY').append($clone);
}
//show it after some time ...
highlight_timeout = setTimeout(highlight,700);
/**
* when we click on the zoom,
* we display the image in the center of the window,
* and enlarge it to the size of the real image,
* fading this one in, after the animation is over.
*/
$clone.find('.ih_zoom').bind('click',function(){			var $zoom = $(this);
$zoom.addClass('ih_loading').removeClass('ih_zoom');			var imgL_source = $thumb.attr('alt');
$('<img class="ih_preview" style="display:none;"/>').load(function(){				var $imgL = $(this);
$zoom.hide();
var windowW = $(window).width();				var windowH = $(window).height();				var windowS = $(window).scrollTop();
$clone.append($imgL).animate({
'top'			: windowH/2 + windowS + 'px',					'left'			: windowW/2 + 'px',					'margin-left'	: -$thumb.width()/2 + 'px',					'margin-top'	: -$thumb.height()/2 + 'px'
},400,function(){					var $clone = $(this);					var largeW = $imgL.width();					var largeH = $imgL.height();
$clone.animate({
'top'			: windowH/2 + windowS + 'px',						'left'			: windowW/2 + 'px',						'margin-left'	: -largeW/2 + 'px',						'margin-top'	: -largeH/2 + 'px',						'width'			: largeW + 'px',						'height'		: largeH + 'px'
},400).find('img:first').animate({						'width'			: largeW + 'px',						'height'		: largeH + 'px'
},400,function(){						var $thumb = $(this);						/**
* fade in the large image and
* replace the zoom with a cross,
* so the user can close the preview mode
*/
$imgL.fadeIn(function(){
$zoom.addClass('ih_close')
.removeClass('ih_loading')
.fadeIn(function(){
$(this).bind('click',function(){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
});
$(this).bind('click',function(){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
});
});
$thumb.remove();
});
});
});
}).error(function(){				/**
* error loading image
* maybe show a message like
* 'no preview available'?
*/
$zoom.fadeOut();
}).attr('src',imgL_source);
});}).bind('mouseleave',function(){	/**
* the user moves the mouse out of an image.
* if there's no clone yet, clear the timeout
* (user was probably scolling through the article, and
* doesn't want to view the image)
*/
if($('#ih_clone').length) return;
clearTimeout(highlight_timeout);});/*** the user moves the mouse out of the clone.* if we don't have yet the cross option to close the preview, then* clear the timeout*/$('#ih_clone').live('mouseleave',function() {	var $clone = $('#ih_clone');	if(!$clone.find('.ih_preview').length){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
}});

就这样！我们希望你喜欢这个教程，并觉得它有用！