jquery win8风格网站图片九宫格排列布局左右全屏图片滚动



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

347 1384 462



特效描述:jquery win8风格网站 九宫格排列布局 左右全屏图片滚动。九宫格排列布局左右全屏图片滚动

代码结构

1. 引入CSS

<link href="lib/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

	<div id="place">
		<div id="name1"></div>
		<div id="wrapper1">
			<div id="thumb1-1"></div>
			<div id="thumb1-2"></div>
			<div id="thumb1-3"></div>
			<div id="thumb1-4"></div>
			<div id="thumb1-5"></div>
			<div id="thumb1-6"></div>
			<div id="thumb1-7"></div>
			<div id="thumb1-8"></div>
			<div id="thumb1-9"></div>
			<div id="thumb1-10"></div>
			<div id="thumb1-11"></div>
			<div id="thumb1-12"></div>	
			<form action="" method="get">
				<input type="text" name="q" value="" /><button type="submit"></button>
				<div id="engines1">
					<div id="google1"></div>
					<div id="bing1"></div>
					<div id="youdao1"></div>
					<div id="sogou1"></div>
				</div>
				<div id="search-engine1"></div>
			</form>
		</div><!-- end wrapper1 -->
		<div id="button1to2"></div>
		<div id="button2to1"></div>
		<div id="name2"></div>
		<div id="wrapper2">
			<div id="thumb2-1"></div>
			<div id="thumb2-2"></div>
			<div id="thumb2-3"></div>
			<div id="thumb2-4"></div>
			<div id="thumb2-5"></div>
			<div id="thumb2-6"></div>
			<div id="thumb2-7"></div>
			<div id="thumb2-8"></div>
			<div id="thumb2-9"></div>
			<div id="thumb2-10"></div>
			<div id="thumb2-11"></div>
			<div id="thumb2-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines2">
					<div id="google2"></div>
					<div id="bing2"></div>
					<div id="yahoo2"></div>
					<div id="wikipedia2"></div>
				</div>
				<div id="search-engine2"></div>
			</form>
		</div><!-- end wrapper2 -->
		<div id="button2to3"></div>
		<div id="button3to2"></div>
		<div id="name3"></div>
		<div id="wrapper3">
			<div id="thumb3-1"></div>
			<div id="thumb3-2"></div>
			<div id="thumb3-3"></div>
			<div id="thumb3-4"></div>
			<div id="thumb3-5"></div>
			<div id="thumb3-6"></div>
			<div id="thumb3-7"></div>
			<div id="thumb3-8"></div>
			<div id="thumb3-9"></div>
			<div id="thumb3-10"></div>
			<div id="thumb3-11"></div>
			<div id="thumb3-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines3">
					<div id="google3"></div>
					<div id="bing3"></div>
					<div id="yahoo3"></div>
					<div id="wikipedia3"></div>
				</div>
				<div id="search-engine3"></div>
			</form>
		</div><!-- end wrapper3 -->
		<div id="button3to4"></div>
		<div id="button4to3"></div>
		<div id="name4"></div>
		<div id="wrapper4">
			<div id="thumb4-1"></div>
			<div id="thumb4-2"></div>
			<div id="thumb4-3"></div>
			<div id="thumb4-4"></div>
			<div id="thumb4-5"></div>
			<div id="thumb4-6"></div>
			<div id="thumb4-7"></div>
			<div id="thumb4-8"></div>
			<div id="thumb4-9"></div>
			<div id="thumb4-10"></div>
			<div id="thumb4-11"></div>
			<div id="thumb4-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines4">
					<div id="google4"></div>
					<div id="bing4"></div>
					<div id="yahoo4"></div>
					<div id="wikipedia4"></div>
				</div>
				<div id="search-engine4"></div>
			</form>
		</div><!-- end wrapper4 -->
		<div id="button4to5"></div>
		<div id="button5to4"></div>
		<div id="name5"></div>
		<div id="wrapper5">
			<div id="thumb5-1"></div>
			<div id="thumb5-2"></div>
			<div id="thumb5-3"></div>
			<div id="thumb5-4"></div>
			<div id="thumb5-5"></div>
			<div id="thumb5-6"></div>
			<div id="thumb5-7"></div>
			<div id="thumb5-8"></div>
			<div id="thumb5-9"></div>
			<div id="thumb5-10"></div>
			<div id="thumb5-11"></div>
			<div id="thumb5-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines5">
					<div id="google5"></div>
					<div id="bing5"></div>
					<div id="yahoo5"></div>
					<div id="wikipedia5"></div>
				</div>
				<div id="search-engine5"></div>
			</form>
		</div><!-- end wrapper5 -->
		<div id="button5to6"></div>
		<div id="button6to5"></div>
		<div id="name6"></div>
		<div id="wrapper6">
			<div id="thumb6-1"></div>
			<div id="thumb6-2"></div>
			<div id="thumb6-3"></div>
			<div id="thumb6-4"></div>
			<div id="thumb6-5"></div>
			<div id="thumb6-6"></div>
			<div id="thumb6-7"></div>
			<div id="thumb6-8"></div>
			<div id="thumb6-9"></div>
			<div id="thumb6-10"></div>
			<div id="thumb6-11"></div>
			<div id="thumb6-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines6">
					<div id="google6"></div>
					<div id="bing6"></div>
					<div id="yahoo6"></div>
					<div id="wikipedia6"></div>
				</div>
				<div id="search-engine6"></div>
			</form>
		</div><!-- end wrapper6 -->
		<div id="button6to7"></div>
		<div id="button7to6"></div>
		<div id="name7"></div>
		<div id="wrapper7">
			<div id="thumb7-1"></div>
			<div id="thumb7-2"></div>
			<div id="thumb7-3"></div>
			<div id="thumb7-4"></div>
			<div id="thumb7-5"></div>
			<div id="thumb7-6"></div>
			<div id="thumb7-7"></div>
			<div id="thumb7-8"></div>
			<div id="thumb7-9"></div>
			<div id="thumb7-10"></div>
			<div id="thumb7-11"></div>
			<div id="thumb7-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines7">
					<div id="google7"></div>
					<div id="bing7"></div>
					<div id="yahoo7"></div>
					<div id="wikipedia7"></div>
				</div>
				<div id="search-engine7"></div>
			</form>
		</div><!-- end wrapper7 -->
		<div id="button7to8"></div>
		<div id="button8to7"></div>
		<div id="name8"></div>
		<div id="wrapper8">
			<div id="thumb8-1"></div>
			<div id="thumb8-2"></div>
			<div id="thumb8-3"></div>
			<div id="thumb8-4"></div>
			<div id="thumb8-5"></div>
			<div id="thumb8-6"></div>
			<div id="thumb8-7"></div>
			<div id="thumb8-8"></div>
			<div id="thumb8-9"></div>
			<div id="thumb8-10"></div>
			<div id="thumb8-11"></div>
			<div id="thumb8-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines8">
					<div id="google8"></div>
					<div id="bing8"></div>
					<div id="yahoo8"></div>
					<div id="wikipedia8"></div>
				</div>
				<div id="search-engine8"></div>
			</form>
		</div><!-- end wrapper8 -->
		<div id="button8to9"></div>
		<div id="button9to8"></div>
		<div id="name9"></div>
		<div id="wrapper9">
			<div id="thumb9-1"></div>
			<div id="thumb9-2"></div>
			<div id="thumb9-3"></div>
			<div id="thumb9-4"></div>
			<div id="thumb9-5"></div>
			<div id="thumb9-6"></div>
			<div id="thumb9-7"></div>
			<div id="thumb9-8"></div>
			<div id="thumb9-9"></div>
			<div id="thumb9-10"></div>
			<div id="thumb9-11"></div>
			<div id="thumb9-12"></div>
			<form action="" method="get">
				<input type="text" name="q" value="" placeholder="" /><button type="submit"></button>
				<div id="engines9">
					<div id="google9"></div>
					<div id="bing9"></div>
					<div id="yahoo9"></div>
					<div id="wikipedia9"></div>
				</div>
				<div id="search-engine9"></div>
			</form>
		</div><!-- end wrapper9 -->
	</div><!-- end place -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到