利用jQuery實現鼠標左右拖動切換布局大小代碼



40 156 53



特效描述:利用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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表