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

之前看到网上有jQuery九宫格图片拉伸变大代码只可以动六张图片，我改了改做了九张图片都可以做的

图片的布局

成品就是每一个图片都可以动看到大图

css样式

<style>
	/*九宫格*/
	.jiugong{
		height: 100%;
		margin:0px 110px 0px 110px;/*居中*/
	}
	.lest{
		 100%;
		height: 714px;
		margin:0 auto;
		position:relative;
		background:#fff;
	}
	.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9{
		 32.5%;
		height: 228px;
		float:left;
		overflow:hidden;
		position:absolute;
	}
	#box-text{
		position:absolute;
		left:0;
		top:0;
		color:#000;
		font-family : "Microsoft YaHei",sans-serif;
	}
	#box-text h2{
		display:block;
		margin-bottom:20px;
		font-size:26px;
	}
	#box-text p{
		display:block;
		font-size:20px;
	}
	.box1>img,.box2>img,.box3>img,.box4>img,.box5>img,.box6>img,.box7>img,.box8>img,.	box9>img{
		overflow:hidden;
	}
	/*box1-9的初始位置*/
	.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;
	}
	.kong{
		 100%;
		height: 36px;
	}
</style>

html

<div class="jiugong">
	<div class="kong"></div>
	<div class="lest">
		<div class="box1">
			<a href="#">
				<img src="./images/16(1).jpg" alt="">
				<div id="box-text">
					<h2>欣欣广场 现代简约</h2>
					<p>设计师:姗姗</p>
				</div>
			</a>
		</div>
		<div class="box2">
			<a href="#">
				<img src="./images/17(1).jpg" alt="">
				<div id="box-text">
					<h2>美元广场 现代简约</h2>
					<p>设计师:王刚</p>
				</div>
			</a>
		</div>
		<div class="box3">
			<a href="#">
				<img src="./images/18(1).jpg" alt="">
				<div id="box-text">
					<h2>梦游别苑 简地中海</h2>
					<p>设计师:蒋娟</p>
				</div>
			</a>
		</div>
		<div class="box4">
			<a href="#">
				<img src="./images/14(1).jpg" alt="">
				<div id="box-text">
					<h2>山水绿城 复古欧式</h2>
					<p>设计师:阿木</p>
				</div>
			</a>
		</div>
		<div class="box5">
			<a href="#">
				<img src="./images/20(1).jpg" alt="">
				<div id="box-text">
					<h2>东山国际 现代简约</h2>
					<p>设计师:刘海</p>
				</div>
			</a>
		</div>
		<div class="box6">
			<a href="#">
				<img src="./images/21(1).jpg" alt="">
				<div id="box-text">
					<h2>芙蓉分苑 现代简约</h2>
					<p>设计师:王强</p>
				</div>
			</a>
		</div>
		<div class="box7">
			<a href="#">
				<img src="./images/22(1).jpg" alt="">
				<div id="box-text">
					<h2>兮兮时代 美式复古</h2>
					<p>设计师:徐欢</p>
				</div>
			</a>
		</div>
		<div class="box8">
			<a href="#">
				<img src="./images/23(1).jpg" alt="">
				<div id="box-text">
					<h2>小时花园 现代简约</h2>
					<p>设计师:陈涵</p>
				</div>
			</a>
		</div>
		<div class="box9">
			<a href="#">
				<img src="./images/24(1).jpg" alt="">
				<div id="box-text">
					<h2>山水绿城 田园简洁</h2>
					<p>设计师:王虎</p>
				</div>
			</a>
		</div>
	</div>
	<div class="kong"></div>
</div>

jquery

<!-- 兼容IE8以上的 -->
<!--[if gt IE 8]><!-->
<script src="./images/jquery-3.2.1.min.js"></script>
<!--<![endif]-->

<!-- 兼容包括IE8以下的浏览器 -->
<!--[if ite IE 8]>
<script src="./images/jquery-1.12.4.min.js"></script>
<![endif]-->


<script>
	// 九宫格
$(function(){
//box1  点击box1时box1变大，高度变成两个box的高度，吧box4-6宽缩小,box2和box3宽度变小，它们的位置发生变化
$(".box1").mouseover(function(event){
	//stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止
	$(".box1").stop(true,true).animate({"500px",height:"471px"},200);
	$(".box2").stop(true,true).animate({"335px",height:"228px",left:"515px",top:"0px"},200);
	$(".box3").stop(true,true).animate({"335px",height:"228px",left:"865px",top:"0px"},200);
	$(".box4").stop(true,true).animate({"218px",height:"228px",left:"515px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"218px",height:"228px",left:"748px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"218px",height:"228px",left:"981px",top:"243px"},200);
	event.stopPropagation();//阻止事件冒泡
})
$(".box1").mouseout(function(event){
	// 鼠标离开box位置回到初始值
	$(".box1").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"0px"},200);
	$(".box2").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"0"},200);
	$(".box3").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"0"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})

//box2
$(".box2").mouseover(function(event){
	$(".box1").stop(true,true).animate({"390px",height:"228px",left:"0",top:"0"},200);
	$(".box2").stop(true,true).animate({"500px",height:"471px"},200);
	$(".box3").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"0"},200);
	$(".box4").stop(true,true).animate({"187px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"188px",height:"228px",left:"203px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"243px"},200);
	event.stopPropagation();//阻止事件冒泡
})
$(".box2").mouseout(function(event){
	$(".box1").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"0px"},200);
	$(".box2").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"0"},200);
	$(".box3").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"0"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})

//box3
$(".box3").mouseover(function(event){
	$(".box3").stop(true,true).animate({"500px",height:"471px",left:"700px",top:"0"},200);
	$(".box1").stop(true,true).animate({"335px",height:"228px",left:"0",top:"0"},200);
	$(".box2").stop(true,true).animate({"335px",height:"228px",left:"350px",top:"0"},200);
	$(".box4").stop(true,true).animate({"218px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"218px",height:"228px",left:"233px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"218px",height:"228px",left:"466px",top:"243px"},200);
	event.stopPropagation();
})
$(".box3").mouseout(function(event){
	$(".box1").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"0px"},200);
	$(".box2").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"0"},200);
	$(".box3").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"0"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})

//box4
$(" .box4").mouseover(function(event){
	$(".box4").stop(true,true).animate({"500px",height:"471px"},200);
	$(".box5").stop(true,true).animate({"335px",height:"228px",left:"515px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"335px",height:"228px",left:"865px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"218px",height:"228px",left:"515px",top:"486px"},200);
	$(".box8").stop(true,true).animate({"218px",height:"228px",left:"748px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"218px",height:"228px",left:"981px",top:"486px"},200);
	event.stopPropagation();
})
$(".box4").mouseout(function(event){
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
})
//box5
$(".box5").mouseover(function(){
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"500px",height:"471px"},200);
	$(".box6").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"187px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"188px",height:"228px",left:"203px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"486px"},200);
	event.stopPropagation();
})
$(".box5").mouseout(function(event){
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
})

//box6
$(".box6").mouseover(function(event){
	$(".box6").stop(true,true).animate({"500px",height:"471px",left:"700px",top:"243px"},200);
	$(".box4").stop(true,true).animate({"335px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"335px",height:"228px",left:"350px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"218px",height:"228px",left:"0px",top:"486px"},200);
	$(".box8").stop(true,true).animate({"218px",height:"228px",left:"233px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"218px",height:"228px",left:"466px",top:"486px"},200);
	event.stopPropagation();    //  阻止事件冒泡
	
	
})
$(".box6").mouseout(function(event){
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0px",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
})

//box7
$(" .box7").mouseover(function(event){
	$(".box7").stop(true,true).animate({"500px",height:"471px",left:"0",top:"243px"},200);
	$(".box8").stop(true,true).animate({"335px",height:"228px",left:"515px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"335px",height:"228px",left:"865px",top:"486px"},200);
	$(".box4").stop(true,true).animate({"218px",height:"228px",left:"515px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"218px",height:"228px",left:"748px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"218px",height:"228px",left:"981px",top:"243px"},200);
	event.stopPropagation();
})
$(".box7").mouseout(function(event){
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})


//box8
$(".box8").mouseover(function(){
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"500px",height:"471px",left:"405px",top:"243px"},200);
	$(".box9").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"486px"},200);
	$(".box4").stop(true,true).animate({"187px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"188px",height:"228px",left:"203px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"280px",height:"228px",left:"920px",top:"243px"},200);
	event.stopPropagation();
})
$(".box8").mouseout(function(event){
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})


//box9
$(".box9").mouseover(function(event){
	$(".box7").stop(true,true).animate({"335px",height:"228px",left:"0px",top:"486px"},200);
	$(".box8").stop(true,true).animate({"335px",height:"228px",left:"350px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"500px",height:"471px",left:"700px",top:"243px"},200);
	$(".box4").stop(true,true).animate({"218px",height:"228px",left:"0px",top:"243px"},200);
	$(".box5").stop(true,true).animate({"218px",height:"228px",left:"233px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"218px",height:"228px",left:"466px",top:"243px"},200);
	event.stopPropagation();    //  阻止事件冒泡
	
	
})
$(".box9").mouseout(function(event){
	$(".box7").stop(true,true).animate({"390px",height:"228px",left:"0",top:"486px"},200);
	$(".box8").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"486px"},200);
	$(".box9").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"486px"},200);
	$(".box4").stop(true,true).animate({"390px",height:"228px",left:"0",top:"243px"},200);
	$(".box5").stop(true,true).animate({"390px",height:"228px",left:"405px",top:"243px"},200);
	$(".box6").stop(true,true).animate({"390px",height:"228px",left:"810px",top:"243px"},200);
})



})
</script>