jQuery文字段落鼠标悬停图片突出显示和预览



141 561 188



特效描述:文字段落 鼠标悬停 图片突出显示 图片突出预览,jQuery图像突出显示和预览

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="jquery.min.js"></script>

3. HTML代码

<div id="content">
	<h1>使用jQuery的图像突出显示和预览</h1>
	<p class="subline">悬停在图像突出</p>
	<div class="line"></div>
	<div id="article" class="article">
		<p>
			在这个地窖的一个部分,我们保持葡萄酒,烈酒和规定。从他们迅速消失,我们收购了迷信埋在那里的人的精神是在夜深人静举行一个节日。
			<img src="images/thumbs/1.jpg" alt="images/1.jpg" class="ih_image left"/>
			这是我们至少可以肯定,经常一个上午会发现碎片的腌制肉类,罐头等杂物,乱抛垃圾的地方,虽然它已牢固地锁定并禁止反对人类的入侵。有人建议删除的规定和存放在其他地方,但我们亲爱的妈妈,总是慷慨和热情好客,说是更好地承受风险损失比:否认了这一说法鬼儿戏满足他们可能会设置买单的调查,这将推翻
			<img src="images/thumbs/2.jpg" alt="images/2.jpg" class="ih_image right"/>
			我们的分工方案劳动,全家人的精力转移到单业内人士所追求的我 - 我们可能都装饰横梁绞架。我们接受了她的决定与孝顺提交,由于我们崇敬她的世俗智慧和她的性格的纯度。
		</p>
		<p>
			在事件我们沉淀飞行的,从那个恐怖的地方 -在那个动荡,疯抢的灭绝人类所有情绪了受潮发霉的楼梯 - 滑倒,坠,
			<img src="images/thumbs/3.jpg" alt="images/3.jpg" class="ih_image left"/>
			彼此拉下来,爬上了彼此的背部 - 点亮和熄灭,其强大的兄弟下方的脚践踏辣妹和投掷落后死亡的母亲的手臂! - 这一切,我不敢详谈。
			我的母亲,我大哥和妹妹,我逃脱,其余仍低于灭亡自己的伤口,或他们的恐怖 - 有些也许,用火焰。对于我们四个人在一个小时内,匆匆收集在一起什么金钱和珠宝,我们有什么样的服装,我们可以随身携带,发射的住宅,,逃离其光进山。
		</p>
	</div>
</div>
<div id="ih_overlay" class="ih_overlay" style="display:none;"></div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
	/**
	* 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").css({
					display:"block",height:$(document).height()
				});
				$('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. 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();
									});
								});
								$thumb.remove();
							});
						});
					});
				}).error(function(){
					/**
					* error loading image. Maybe show a message : '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();
		}
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 带标题的焦点图 文字提示框 带缩略图的幻灯片 带简介的焦点图 提示框/弹出层 图片轮播 layer 自动滚动图片轮播 lightbox 马赛克幻灯片 Tooltip工具提示框 全屏焦点图 浮动提示框 html5弹窗动画 flash焦点图 弹出层拖动 窗口提示框 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到