jQuery九宫格图片拉伸变大代码

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

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

以下是 jQuery九宫格图片拉伸变大代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>jQuery九宫格图片拉伸变大代码</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<center>
<div class="lest">
	<div class="box1">
		<a href="#"><img src="img/1.jpg" alt="" /></a>
	</div>
	<div class="box2">
		<a href="#"><img src="img/2.jpg" alt="" /></a>
	</div>
	<div class="box3">
		<a href="#"><img src="img/3.jpg" alt="" /></a>
	</div>
	<div class="box4">
		<a href="#"><img src="img/4.jpg" alt="" /></a>
	</div>
	<div class="box5">
		<a href="#"><img src="img/5.jpg" alt="" /></a>
	</div>
	<div class="box6">
		<a href="#"><img src="img/6.jpg" alt="" /></a>
	</div>
	<div class="box7">
		<a href="#"><img src="img/1.jpg" alt="" /></a>
	</div>
	<div class="box8">
		<a href="#"><img src="img/2.jpg" alt="" /></a>
	</div>
	<div class="box9">
		<a href="#"><img src="img/3.jpg" alt="" /></a>
	</div>
</div>
</center>
</body>
</html>

JS代码(index.js):

$(function(){
	//box1$(".lest .box1").mouseover(function(event){
	$(".box1").stop(true,true).animate({
	width:"500px",height:"471px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"335px",height:"228px",left:"515px",top:"0px"}
,200);
	$(".box3").stop(true,true).animate({
	width:"335px",height:"228px",left:"865px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"218px",height:"228px",left:"515px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"218px",height:"228px",left:"748px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"218px",height:"228px",left:"981px",top:"243px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box1").mouseout(function(event){
	$(".box1").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"0px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"0px"}
,200);
	$(".box3").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
}
)//box2$(".box2").mouseover(function(event){
	$(".box1").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"0px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"500px",height:"471px"}
,200);
	$(".box3").stop(true,true).animate({
	width:"280px",height:"228px",left:"920px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"187px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"188px",height:"228px",left:"203px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"280px",height:"228px",left:"920px",top:"243px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box2").mouseout(function(event){
	$(".box1").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"0px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"0px"}
,200);
	$(".box3").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
}
)//box3$(".box3").mouseover(function(event){
	$(".box3").stop(true,true).animate({
	width:"500px",height:"471px",left:"700",top:"0px"}
,300);
	$(".box1").stop(true,true).animate({
	width:"335px",height:"228px",left:"0px",top:"0px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"335px",height:"228px",left:"350px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"218px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"218px",height:"228px",left:"233px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"218px",height:"228px",left:"466px",top:"243px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box3").mouseout(function(event){
	$(".box1").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"0px"}
,200);
	$(".box2").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"0px"}
,200);
	$(".box3").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"0px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
}
)//box4$(".lest .box4").mouseover(function(event){
	$(".box4").stop(true,true).animate({
	width:"500px",height:"471px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"335px",height:"228px",left:"515px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"335px",height:"228px",left:"865px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"218px",height:"228px",left:"515px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"218px",height:"228px",left:"748px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"218px",height:"228px",left:"981px",top:"486px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box4").mouseout(function(event){
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"486px"}
,200);
}
)//box5$(".box5").mouseover(function(event){
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"500px",height:"471px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"280px",height:"228px",left:"920px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"187px",height:"228px",left:"0px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"188px",height:"228px",left:"203px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"280px",height:"228px",left:"920px",top:"486px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box5").mouseout(function(event){
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"486px"}
,200);
}
)//box6$(".box6").mouseover(function(event){
	$(".box6").stop(true,true).animate({
	width:"500px",height:"471px",left:"700",top:"243px"}
,200);
	$(".box4").stop(true,true).animate({
	width:"335px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"335px",height:"228px",left:"350px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"218px",height:"228px",left:"0px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"218px",height:"228px",left:"233px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"218px",height:"228px",left:"466px",top:"486px"}
,200);
	event.stopPropagation();
	// 阻止事件冒泡}
)$(".box6").mouseout(function(event){
	$(".box4").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"243px"}
,200);
	$(".box5").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"243px"}
,200);
	$(".box6").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"243px"}
,200);
	$(".box7").stop(true,true).animate({
	width:"390px",height:"228px",left:"0px",top:"486px"}
,200);
	$(".box8").stop(true,true).animate({
	width:"390px",height:"228px",left:"405px",top:"486px"}
,200);
	$(".box9").stop(true,true).animate({
	width:"390px",height:"228px",left:"810px",top:"486px"}
,200);
}
)}
)

CSS代码(index.css):

/*========== box居中 ==========*/
.lest{width:1200px;height:714px;position:relative;background:#fff;}
.box1,.box2,.box3,.box4,.box5,.box7,.box6,.box8,.box9{width:390px;height:228px;float:left;margin:0 15px 15px 0;overflow:hidden;position:absolute;}
.box1{top:0;left:0;}
.box2{top:0;left:405px;}
.box3{top:0;left:810px;}
.box4{top:243px;left:0;}
.box5{top:243px;left:405px;}
.box6{top:243px;left:810px;}
.box7{top:486px;left:0;}
.box8{top:486px;left:405px;}
.box9{top:486px;left:810px;}

CSS代码(style.css):

body{font-size:12px;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}
h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;}
ul,ol,li,dl,dt,dd{margin:0;padding:0;list-style-type:none;}
img{border:none;vertical-align:top;}
a{color:#424242;text-decoration:none;}
a:hover{color:#b13c39;text-decoration:underline;}
.clear{clear:both;height:0;overflow:hidden;font-size:0;line-height:0;margin:0;padding:0;}

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