利用jQuery實現自定制主機滑塊特效



36 141 48



特效描述:利用jQuery實現 自定制主機 滑塊特效,利用jQuery實現自定制主機滑塊特效

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>

3. HTML代碼

<div id="wrapper">
	<div id="header">
	</div>
	<div class="cleaner h10">
	</div>
	<div id="chooseplan" align="center">
		<div class="cleaner h10">
		</div>
		<div align="center">
			<h2>Choose your plan now</h2>
		</div>
		<p>Powerful <strong>cPanel</strong> hosting on Texas datacenters with 99.9% 
		uptime guarantee.</p>
		<div id="hostpslider">
		</div>
		<div class="cleaner h10">
		</div>
		<div class="sb" align="left">
			<p><strong>Small</strong></p>
		</div>
		<div class="lb" align="center">
			<p><strong>Medium</strong></p>
		</div>
		<div class="lb" align="center">
			<p><strong>Large</strong></p>
		</div>
		<div class="sb" align="right">
			<p><strong>Ultimate</strong></p>
		</div>
		<div id="fourboxes">
			<div class="box">
				<label for="BW">Bandwidth:</label>
				<input type="text" id="BW" disabled="disabled" /> </div>
			<div class="box">
				<label for="DS">Disk Space:</label>
				<input type="text" id="DS" disabled="disabled" /> </div>
			<div class="box">
				<label for="Price">Price:</label>
				<input type="text" id="Price" disabled="disabled" />
                <lbel for="Price"><sub>/MO</sub></lbel>
            </div>
			<div class="cleaner h10">
			</div>
			<div class="orderbox" align="center">
				<div class="cleaner h20">
				</div>
				<a href="#">Order</a> </div>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 圖片拖動 圖片拖拽 圖片滑動 圖片滑塊 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

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