jQuery聚焦相册特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery聚焦相册特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<style>
	body{width:500px;background:#eee;margin:0 auto; text-align:center;}
	img{vertical-align:middle;}
.box{float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:10px;}
.boxBor{position:absolute;left:0;top:0;display:none;border:1px solid white;z-index:99;background:red;/*��˿������Ϳ����ð�*/background:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-webkit-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-o-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));}
	</style>
	<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="boxBor"></div>
<div class="box"><img src="images/girl.jpg" alt=""></div>
<div class="box"><img src="images/girl2.jpg" alt=""></div>
<div class="box"><img src="images/girl3.jpg" alt=""></div>
<div class="box"><img src="images/girl4.jpg" alt=""></div>
<div class="box"><img src="images/girl5.jpg" alt=""></div>
<div class="box"><img src="images/girl.jpg" alt=""></div>
<div class="box"><img src="images/girl2.jpg" alt=""></div>
<div class="box"><img src="images/girl3.jpg" alt=""></div>
<div class="box"><img src="images/girl4.jpg" alt=""></div>
<div class="box"><img src="images/girl5.jpg" alt=""></div>
<div class="box"><img src="images/girl.jpg" alt=""></div>
<div class="box"><img src="images/girl2.jpg" alt=""></div>
<div class="box"><img src="images/girl3.jpg" alt=""></div>
<div class="box"><img src="images/girl4.jpg" alt=""></div>
<div class="box"><img src="images/girl5.jpg" alt=""></div>
<div class="box"><img src="images/girl.jpg" alt=""></div>
<div class="box"><img src="images/girl2.jpg" alt=""></div>
<div class="box"><img src="images/girl3.jpg" alt=""></div>
<div class="box"><img src="images/girl4.jpg" alt=""></div>
<div class="box"><img src="images/girl5.jpg" alt=""></div>

	<script>
$(function(){
	$('.box').bind('mouseover',function(){
		var oPosition=$(this).position();
		var oThis=$(this)		
		$('.boxBor').queue('fnHide');		
		if($(".boxBor").attr('deta-switch')!=='true'){
			$(".boxBor").attr('deta-switch','true');
			$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
		}
		$(".boxBor").stop(false,false).animate({
			opacity:1,
			left:oPosition.left+10,
			top:oPosition.top+10,
			width:oThis.width(),
			height:oThis.height()
		},250)
	})
})
	</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)