之前看到网上有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. Ubuntu 常见错误及解决方法——长期不定时更新

    1. 修复 /etc/sudoers 文件损坏导致不能使用 sudo 命令 这是之前错误地编辑了 /etc/sudoers 这个文件导致的,因此撤销编辑即可,但由于已经不能使用 sudo 命令,因此不 ...

  2. 小程序开发时PC端调试返回结果和手机端IOS不一致问题

    IOS11登录时遇到一个请求与PC返回不一致情况, 在小程序调试时IOS上始终没有wx.request() 不能发送请求 尝试解决方法 打开微信小程序调试的设置, 将TLS设为可信任的域名 设置 -- ...

  3. 官方文档 恢复备份指南七 Using Flashback Database and Restore Points

    本章内容: Understanding Flashback Database, Restore Points and Guaranteed Restore Points Logging for Fla ...

  4. BZOJ 3670 NOI2014 动物园 KMP+dp

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3670 题意概述:令num[i]表示字符串由1~i的字符形成的前缀中不相重叠的相同前后缀的数 ...

  5. StanFord 编程方法

    教程下载地址:http://www.yyets.com/resource/26208 定制工具下载地址:http://www.stanford.edu/class/cs106a/cgi-bin/cla ...

  6. onkeypress,onkeyup,onkeydown区别

    onkeypress 这个事件在用户按下并放开任何字母数字键时发生.系统按钮(例如,箭头键和功能键)无法得到识别. onkeyup 这个事件在用户放开任何先前按下的键盘键时发生. onkeydown ...

  7. SpringMVC-01-宏观上把握SpringMVC框架

    springmvc是一个基于mvc的web框架,是spring框架的一个模块,所以springmvc和spring无需通过中间整合层进行整合.我们先来看下spring的一个架构模型,看springmv ...

  8. php 将数组存入cookie

    最近在做一个购物车的功能,需要将商品的ID和商品数量存入cookie,实际上,cookie是不能存数组的,因此需要用到序列化函数serialize() 函数解释: serialize()就是将PHP中 ...

  9. 【bzoj3626】[LNOI2014]LCA 树链剖分+线段树

    题目描述 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q次询问,每次询 ...

  10. C#重载和重写

    Overload:重载就是在同一个类中,方法名相同,参数列表不同.参数列表不同包括:参数的个数不同,参数类型不同. using System; using System.Collections.Gen ...