利用jQuery实现鼠标左右拖动切换布局大小代码



36 142 48



特效描述:利用jQuery实现 鼠标左右拖动 切换布局大小,利用jQuery实现鼠标左右拖动切换布局大小代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.respontent.all.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/layout.js"></script>
<script type="text/javascript" src="js/jquery.respontent.all.min.js"></script>

3. HTML代码

		<nav>
			<ul>
				<li><a href="#examples">Examples</a></li>
			</ul>
		</nav>
		<div id="wrapper">
			<section id="examples">
				<div class="example">
					<h3><span>Images</span></h3>
					<div>
						<div class="w">
							<em>with respontent</em>
		<img src="img/zzsc.jpg" />
						</div>
						<div class="divider"></div>
						<div class="wo">
							<em>without respontent</em>
		<img src="img/zzsc.jpg" />
						</div>
					</div>
				</div>
				<div class="example">
					<h3><span>YouTube videos</span></h3>
					<div>
						<div class="w">
							<em>with respontent</em>
		<iframe width="400" height="300" src="http://player.youku.com/player.php/Type/Folder/Fid/22871142/Ob/1/sid/XNzg5MTEyNzM2/v.swf" frameborder="0" allowfullscreen></iframe>
						</div>
						<div class="divider"></div>
						<div class="wo">
							<em>without respontent</em>
		<iframe width="400" height="300" src="http://player.youku.com/player.php/sid/XNzg5MTE0MzI0/v.swf" frameborder="0" allowfullscreen></iframe>
						</div>
					</div>
				</div>
				<div class="example">
					<h3><span>Tables</span></h3>
					<div>
						<div class="w">
							<em>with respontent</em>
							<table border="1" cellpadding="5" cellspacing="5">
		<thead>
			<tr>
				<th>Population</th>
				<th>Food source</th>
				<th>Shelter</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Pedigree</td>
				<td>Fed by guardian</td>
				<td>Human guardian</td>
			</tr>
			<tr>
				<td>Pet</td>
				<td>Fed by guardian</td>
				<td>Human homes</td>
			</tr>
			<tr>
				<td>Semi-feral</td>
				<td>General feeding</td>
				<td>Buildings</td>
			</tr>
		</tbody>
							</table>
						</div>
						<div class="divider"></div>
						<div class="wo">
							<em>without respontent</em>
							<table border="1" cellpadding="5" cellspacing="5">
		<thead>
			<tr>
				<th>Population</th>
				<th>Food source</th>
				<th>Shelter</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Pedigree</td>
				<td>Fed by guardian</td>
				<td>Human guardian</td>
			</tr>
			<tr>
				<td>Pet</td>
				<td>Fed by guardian</td>
				<td>Human homes</td>
			</tr>
			<tr>
				<td>Semi-feral</td>
				<td>General feeding</td>
				<td>Buildings</td>
			</tr>
		</tbody>
							</table>
						</div>
					</div>
				</div>	
				<div class="example">
					<h3><span>Tables</span></h3>
					<div>
						<div class="w">
							<em>with respontent</em>
							<table class="list" border="1" cellpadding="5" cellspacing="5">
		<thead>
			<tr>
				<th>Population</th>
				<th>Food source</th>
				<th>Shelter</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Pedigree</td>
				<td>Fed by guardian</td>
				<td>Human guardian</td>
			</tr>
			<tr>
				<td>Pet</td>
				<td>Fed by guardian</td>
				<td>Human homes</td>
			</tr>
			<tr>
				<td>Semi-feral</td>
				<td>General feeding</td>
				<td>Buildings</td>
			</tr>
		</tbody>
							</table>
						</div>
						<div class="divider"></div>
						<div class="wo">
							<em>without respontent</em>
							<table border="1" cellpadding="5" cellspacing="5">
		<thead>
			<tr>
				<th>Population</th>
				<th>Food source</th>
				<th>Shelter</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Pedigree</td>
				<td>Fed by guardian</td>
				<td>Human guardian</td>
			</tr>
			<tr>
				<td>Pet</td>
				<td>Fed by guardian</td>
				<td>Human homes</td>
			</tr>
			<tr>
				<td>Semi-feral</td>
				<td>General feeding</td>
				<td>Buildings</td>
			</tr>
		</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="example">
					<h3><span>Google Maps</span></h3>
					<div>
						<div class="w">
							<em>with respontent</em>
		<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;geocode=&amp;q=Catskill,+New+York,+Verenigde+Staten&amp;aq=0&amp;oq=cats&amp;sll=37.0625,-95.677068&amp;sspn=46.27475,79.716797&amp;ie=UTF8&amp;hq=&amp;hnear=Catskill,+Greene+County,+New+York&amp;t=m&amp;z=14&amp;ll=42.21731,-73.864573&amp;output=embed"></iframe>
						</div>
						<div class="divider"></div>
						<div class="wo">
							<em>without respontent</em>
		<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;geocode=&amp;q=Catskill,+New+York,+Verenigde+Staten&amp;aq=0&amp;oq=cats&amp;sll=37.0625,-95.677068&amp;sspn=46.27475,79.716797&amp;ie=UTF8&amp;hq=&amp;hnear=Catskill,+Greene+County,+New+York&amp;t=m&amp;z=14&amp;ll=42.21731,-73.864573&amp;output=embed"></iframe>
						</div>
					</div>
				</div>
			</section>
		</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 拖动 拖拽 拖动插件 拖拽插件 放大缩小 变大变小 放大 缩小 变大 变小 缩放 缩放切换 图片拖动 图片拖拽 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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