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

图片的布局



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

css样式

<style>

	/*九宫格*/

	.jiugong{

		height: 100%;

		margin:0px 110px 0px 110px;/*居中*/

	}

	.lest{

		width: 100%;

		height: 714px;

		margin:0 auto;

		position:relative;

		background:#fff;

	}

	.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9{

		width: 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{

		width: 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({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){

	// 鼠标离开box位置回到初始值

	$(".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:"0"},200);

	$(".box3").stop(true,true).animate({width:"390px",height:"228px",left:"810px",top:"0"},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:"0",top:"0"},200);

	$(".box2").stop(true,true).animate({width:"500px",height:"471px"},200);

	$(".box3").stop(true,true).animate({width:"280px",height:"228px",left:"920px",top:"0"},200);

	$(".box4").stop(true,true).animate({width:"187px",height:"228px",left:"0",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:"0"},200);

	$(".box3").stop(true,true).animate({width:"390px",height:"228px",left:"810px",top:"0"},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:"700px",top:"0"},200);

	$(".box1").stop(true,true).animate({width:"335px",height:"228px",left:"0",top:"0"},200);

	$(".box2").stop(true,true).animate({width:"335px",height:"228px",left:"350px",top:"0"},200);

	$(".box4").stop(true,true).animate({width:"218px",height:"228px",left:"0",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:"0"},200);

	$(".box3").stop(true,true).animate({width:"390px",height:"228px",left:"810px",top:"0"},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

$(" .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:"0",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:"0",top:"486px"},200);

	$(".box8").stop(true,true).animate({width:"390px",height:"228px",left:"405px",top:"486"},200);

	$(".box9").stop(true,true).animate({width:"390px",height:"228px",left:"810px",top:"486px"},200);

})

//box5

$(".box5").mouseover(function(){

	$(".box4").stop(true,true).animate({width:"390px",height:"228px",left:"0",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:"0",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:"0",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:"0",top:"486px"},200);

	$(".box8").stop(true,true).animate({width:"390px",height:"228px",left:"405px",top:"486"},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:"700px",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);

})

//box7

$(" .box7").mouseover(function(event){

	$(".box7").stop(true,true).animate({width:"500px",height:"471px",left:"0",top:"243px"},200);

	$(".box8").stop(true,true).animate({width:"335px",height:"228px",left:"515px",top:"486px"},200);

	$(".box9").stop(true,true).animate({width:"335px",height:"228px",left:"865px",top:"486px"},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();

})

$(".box7").mouseout(function(event){

	$(".box7").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

	$(".box4").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

})

//box8

$(".box8").mouseover(function(){

	$(".box7").stop(true,true).animate({width:"390px",height:"228px",left:"0",top:"486px"},200);

	$(".box8").stop(true,true).animate({width:"500px",height:"471px",left:"405px",top:"243px"},200);

	$(".box9").stop(true,true).animate({width:"280px",height:"228px",left:"920px",top:"486px"},200);

	$(".box4").stop(true,true).animate({width:"187px",height:"228px",left:"0",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();

})

$(".box8").mouseout(function(event){

	$(".box7").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

	$(".box4").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

})

//box9

$(".box9").mouseover(function(event){

	$(".box7").stop(true,true).animate({width:"335px",height:"228px",left:"0px",top:"486px"},200);

	$(".box8").stop(true,true).animate({width:"335px",height:"228px",left:"350px",top:"486px"},200);

	$(".box9").stop(true,true).animate({width:"500px",height:"471px",left:"700px",top:"243px"},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();    //  阻止事件冒泡

})

$(".box9").mouseout(function(event){

	$(".box7").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

	$(".box4").stop(true,true).animate({width:"390px",height:"228px",left:"0",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);

})

})

</script>

jQuery九宫格图片拉伸变大代码的更多相关文章

  1. 用GDI+DrawImage画上去的图片会变大

    问题: 用GDI+DrawImage画上去的图片会变大 解释: Status DrawImage(Image *image,const Point &point);两参数的这个接口是这么设计的 ...

  2. 鼠标放上去图片慢慢变大js 或 变大

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [UE4]九宫格图片拉伸

    Draw As选择:Box Margin:边界尺寸.如果看不清楚,可以把“Draw As”选择“Border”:

  4. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  5. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  6. jQuery实现等比例缩放大图片

      在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...

  7. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  8. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  9. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

随机推荐

  1. 使用CodeBlocks编译64位程序（用的编译器仅仅是windows sdk的）

    需求: -CodeBlocks使用nightly版本: -Windows SDK(我使用的是6.0A,即微软针对vista的,因为这个比较小,你也可以选择其他版本但是要有64位编译器.他也适用于xps ...

  2. Hadoop伪分布式集群

    一.HDFS伪分布式环境搭建 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时, ...

  3. git instaweb 500 error

    在arch 系统中安装perl-cgi包. 在deiban中参考:https://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A ...

  4. [C/C++] new/delete和malloc/free基本区别

    /**便于遗忘时复习**/ 区别一:本质 new/delete 在C++中是运算符不是函数,需要编译器支持.malloc/free是库函数,需要头文件支持,在C语言中使用. 区别二:开辟内存大小 用 ...

  5. 【解决】Node JS Error: ENOENT

    The Node Beginner Book 书中的实例代码当上传图片时会报Error: ENOENT, 原因:图片默认会选择系统的缓存文件夹下,在windows下无权访问C盘,所以就报错了.. 解决 ...

  6. vim字符编码

    今天我在用vim新建中文文件的时候遇到保存好出现乱码的问题,经过一波百度, :set encoding=utf-8 :set fileencodings=ucs-bom,utf-8,cp936 :se ...

  7. 深入研究java.lang.Runtime类(转)

    一.概述      Runtime类封装了运行时的环境.每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接.      一般不能实例化一个Runtime对象, ...

  8. 【bzoj3122】[Sdoi2013]随机数生成器 BSGS思想的利用

    题目描述 给出递推公式 $x_{i+1}=(ax_i+b)\mod p$ 中的 $p$.$a$.$b$.$x_1$ ,其中 $p$ 是质数.输入 $t$ ,求最小的 $n$ ,使得 $x_n=t$ . ...

  9. [CF620E]New Year Tree

    题目大意:有一棵以$1$为根的有根树,有$n$个点,每个节点初始有颜色$c_i$.有两种操作: $1 v c:$将以$v$为根的子树中所有点颜色更改为$c$ $2 v:$ 查询以$v$为根的子树中的节 ...

  10. 算法学习——st表

    st表是一种基于倍增思想的DP. 用于求一个数列中的某个区间的最大/最小值. 用st[i][j]表示从第i个开始往后2^j个点,最大的是多少. 我们令k[i]表示2^i等于多少 那么有转移方程 st[ ...