jQuery实现文章内图片突出高亮显示和弹出预览效果

分类栏目:用户体验 - 前端开发

14827

发布于 3 条评论

如果在一篇文章中插进一些精美的辅助图片,想必一定会为文章增添很多光彩,不仅内容看起来充实丰满,而且对于文章的排版也是大大的加分,可以让读者获得更加好的阅读体验。但往往在插入图片的时候,总会遇到或这或那的一些问题,导致图片太小、失真、错位、拖长加载速度等等问题。
那你是否有想过怎么为你的网站图片美化一番呢?怎么解决上面提到的那些问题呢?

imagehighlight

今天主要的向大家介绍一个通过jQuery来实现:当鼠标停留在图片上的时候,图片将突出显示,通过可以点击可以预览原图(图片最大化)。这个效果相信很多人都见过,但是也有不少人有这方面的需求,所以拿出来和大家一起分享。在这里只是介绍基本的效果,大家可以结合自己的情况,为自己的网站制造出个性的图片突出显示和预览效果。

查看预览下载附件

好了,那我们开始吧!

HTML代码

一般我们的图片需要准备两个尺寸,一个是原始尺寸(原图),另一个就是缩略图(thumbs),下面是我们的图片代码结构:

<img src="images/thumbs/1.jpg" alt="images/1.jpg" class="ih_image"/>
<div id="ih_overlay" class="ih_overlay" style="display:none;"></div>

这里的alt属性是为后面的效果准备的,主要是定义alt属性来引用大的图片,所以千万别漏掉哦。当然你也可以修改js代码通过别的属性来引用大图片,例如:src

这里的一个div是作为遮罩层使用的,在突出图片或者预览图片的时候,需要把背景变暗。

接下来,我们来创建预览时候的HTML结构,因为当我们点击一张图片的时候,就要弹出相对应的原图出来,所以这段代码是会变化的,所以我们将通过js来创建预览时候的HTML结构,最终通过js输出来的结构如下(其中的images/1.jpg会变化):

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

这段HTML代码是通过js动态生成的js怎么写,将在下面介绍。

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);
}
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);
}
.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

下面是js代码,里面的一些参数都有注释,可以自定义修改。

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

最后可别忘了引入jQuery库。

查看预览下载附件

好了,就这么多,希望你会喜欢并且可以帮助到你。
参考资料:codrops

全部评论 / 3

  1. 很酷,正打算给博客加上这个效果O(∩_∩)O~~

    正仔 2012-11-16
    3
  2. 测试下是否还要审核 :!:

    酷鸟 2012-11-16
    2
  3. 这个效果不错,以后用的上,先收藏起来 ;-)

    多出的一只猪 2012-11-16
    1