之前看到网上有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. Leetcode 678.有效的括号字符串

    有效的括号字符串 给定一个只包含三种字符的字符串:( ,) 和 *,写一个函数来检验这个字符串是否为有效字符串.有效字符串具有如下规则: 任何左括号 ( 必须有相应的右括号 ). 任何右括号 ) 必须 ...

  2. 在C/C++程序中打印当前函数调用栈

    前几天帮同事跟踪的一个程序莫名退出,没有core dump(当然ulimit是打开的)的问题.我们知道,正常情况下,如果程序因为某种异常条件退出的话,应该会产生core dump,而如果程序正常退出的 ...

  3. Chrome Extension & Dark Theme

    Chrome Extension & Dark Theme https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhn ...

  4. SPOJ Repeats（后缀数组+RMQ-ST）

    REPEATS - Repeats no tags  A string s is called an (k,l)-repeat if s is obtained by concatenating k& ...

  5. 洛谷 P2893 [USACO08FEB]修路Making the Grade 解题报告

    P2893 [USACO08FEB]修路Making the Grade 题目描述 A straight dirt road connects two fields on FJ's farm, but ...

  6. 安徽师大附中%你赛day7 T2 乘积 解题报告

    乘积 题目背景 \(\mathrm{Smart}\) 最近在潜心研究数学, 他发现了一类很有趣的数字, 叫做无平方因子数. 也就是这一类数字不能够被任意一个质数的平方整除, 比如\(6\).\(7\) ...

  7. 【POJ 3169 Layout】

    Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 12565Accepted: 6043 Description Like every ...

  8. Codeforces Round #531 (Div. 3) ABCDEF题解

    Codeforces Round #531 (Div. 3) 题目总链接:https://codeforces.com/contest/1102 A. Integer Sequence Dividin ...

  9. bzoj 2756 [SCOI2012]奇怪的游戏 二分+网络流

    2756:[SCOI2012]奇怪的游戏 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 4926  Solved: 1362[Submit][Stat ...

  10. windows远程桌面访问ubuntu12.04

    转载自 : http://blog.csdn.net/shuzui1985/article/details/7592569 1.dashboard----桌面共享 我们共享所使用的协议是rdp,所以我 ...