之前看到网上有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. Annoy解析

    Annoy是高维空间求近似最近邻的一个开源库. Annoy构建一棵二叉树,查询时间为O(logn). Annoy通过随机挑选两个点,并使用垂直于这个点的等距离超平面将集合划分为两部分. 如图所示,图中 ...

  2. shell功能

    日志切割: function rotate() { logs_path=$ echo Rotating Log: $ cp ${logs_path} ${logs_path}.$(date -d &q ...

  3. Week1 Team Homework #1 from Z.XML-项目选择思路--基于对曾经大作业项目的思考

    这两天试玩了一下去年学长的满分工程<shield star>游戏,再结合了一下他们团队的博客记录,有一种非常牛逼的感觉.具体对于这款游戏的一些思考和看法,毛大神已经说的很好了.因此,这里主 ...

  4. 远程sql数据库连接不上，provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接 错误解决

    错误信息: “ 标题: 连接到服务器------------------------------ 无法连接到 192.168.1.20. ------------------------------其 ...

  5. java课程设计——2048

    1.团队介绍 2.项目git地址 [https://gitee.com/SMTwula/java036.git] 3.项目git提交记录截图 沈梦婷 田亚琴 4.项目功能架构图与主要功能流程图 5.项 ...

  6. Linux杂技

    挂载光盘 mkdir /mnt/cdrom #建立挂载点 mount /dev/cdrom /mnt/cdrom/ #挂载光盘 更换YUM源: cd /etc/yum.repos.d/ 使网络yum源 ...

  7. thead tfoot tbody标签的使用

    这三个都是<body>元素的子标签,不常用,因为其只是对<tr>标签做了一个区分 <thread>用于包裹表格头信息 <tfoot>用于包裹表格最后一行 ...

  8. SQL语言：结构化查询语言

    SQL语言:结构化查询语言 程序员或者DBA(数据库管理员)使用SQL和DBBSM进行交互,操纵数据库中的资源 分类: 1.DDL 数据定义语言 结构 create  创建   database ta ...

  9. 洛谷 P2827 蚯蚓 解题报告

    P2827 蚯蚓 题目描述 本题中,我们将用符号 \(\lfloor c \rfloor\) 表示对 \(c\) 向下取整,例如:\(\lfloor 3.0 \rfloor = \lfloor 3.1 ...

  10. git使用笔记（四）远程操作

    By francis_hao    Nov 19,2016 以一张图说明远程操作,图片来自参考[2] git clone 从远端主机克隆一个版本库,若省略directory则生成一个和远端同名的版本库 ...