之前看到网上有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. 1013 Battle Over Cities （25 分）(图的遍历or并查集)

    这题用并查集或者dfs都可以做 dfs #include<bits/stdc++.h> using namespace std; ; bool mp[N][N]; int n,m,k; b ...

  2. linux备忘录-shell脚本

    知识 shell执行方式 shell执行方式有 通过source或. 在现在的bash环境中执行脚本 变量等会保持 通过bash shell.sh或sh shell.sh 使用一个新的bash环境执行 ...

  3. mysql数据库，编码错误解决

    在写代码的过程中,经常会遇见,将中文字符输入到mysql数据库中,但是查看的时候,却发现,中文显示为乱码的情况,让人相当的头疼,今天正好解决了一个这样遇到的问题,所以简单总结一下: 1.首先查看数据库 ...

  4. linux中升级安装python2.7

    打算自建VPN,新购买了一个虚拟服务器,centOS6.6 自带的是python2.6,因为比较习惯python2.7,所以就升级到最新的python2.7.12 首先要安装:sudo yum ins ...

  5. webmagic 二次开发爬虫 爬取网站图片

    webmagic的是一个无须配置.便于二次开发的爬虫框架,它提供简单灵活的API,只需少量代码即可实现一个爬虫. webmagic介绍 编写一个简单的爬虫 webmagic的使用文档:http://w ...

  6. Javascript中闭包常用场景

    一.前言 有准备去看Javascript框架,所以对于Javascript和原型继承有必要去了解,这边小记一下闭包比较好的例子~ 二.正文 先来一下“闭包”的解释~ 一个拥有许多变量和绑定了这些变量的 ...

  7. Mapreduce简要原理与实践

    探索Mapreduce简要原理与实践 目录-探索mapreduce 1.Mapreduce的模型简介与特性?Yarn的作用? 2.mapreduce的工作原理是怎样的? 3.配置Yarn与Mapred ...

  8. [NOIP2003] 传染病控制 搜索+剪枝

    搜索的最广泛应用优化——剪枝 这道题的dp和贪心都是无正确性的,所以,搜~~~~~~~ 搜的时候你发现不剪枝极容易被卡掉(然而良心NOIP没有这么做,不剪枝仍然飞快),所以我们需要一些玄学的剪枝最常见 ...

  9. JS让任意图片垂直水平居中且页面不滚动

    说一下以前遇到的一个问题: 假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过JS来改变图片的宽高,从而实现图片在浏览器居中显示且不滚屏. 方法如下: 首先 ...

  10. [8.16模拟赛] 玩具 (dp/字符串)

    题目描述 儿时的玩具总是使我们留恋,当小皮还是个孩子的时候,对玩具更是情有独钟.小皮是一个兴趣爱好相当广泛且不专一的人,这这让老皮非常地烦恼.也就是说,小皮在不同时刻所想玩的玩具总是会不同,而有心的老 ...