jQuery简单步骤条文本切换特效代码下载


jQuery简单步骤条文本切换特效代码下载
jQuery简单步骤条文本切换特效代码下载以及简单步骤条、文本切换等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div style="width:625px;margin:0 auto;">
	<!--  标题进度条 start-->
	<div class="content" style="margin:30px 0 0 0;width: 100%;">
		<div class="processBar">
			<div id="line0" class="bar">
				<div id="point0" class="c-step c-select"></div>
			</div>
			<div class="text" style="margin: 10px -25px;"><span class='poetry'>第一步</span></div>
		</div>
		<div class="processBar">
			<div id="line1" class="bar">
				<div id="point1" class="c-step"></div>
			</div>
			<div class="text" style="margin: 10px -30px;"><span class='poetry'>第二步</span></div>
		</div>
		<div class="processBar">
			<div id="line2" class="bar">
				<div id="point2" class="c-step"></div>
			</div>
			<div class="text" style="margin: 10px -30px;"><span class='poetry'>第三步</span></div>
		</div>
		<div class="processBar" style="width:10px;">
			<div id="line3" class="bar" style="width: 0;">
				<div id="point3" class="c-step"></div>
			</div>
			<div class="text" style="margin: 10px -15px;"><span class='poetry'>完成</span></div>
		</div>
	</div>
	<!--  标题进度条 end-->
	<div style="clear: both;"></div>
	<div id="MainContent" style="margin:30px 0 0 0;">
		<div class="content" id="basicInfo">
			<span class='poetry'>
				引入jquery.js
			</span>
		</div>
		<div class="content" id="education">
			<span class='poetry'>
				写好布局<br/>
			</span>
		</div>
		<div class="content" id="work">
			<span class='poetry'>
				写好逻辑<br/>
			</span>
		</div>
		<div class="content" id="social">
			<span class='poetry'>
				完成案例
			</span>
		</div>
	</div>
	<div style="clear: both;"></div>
	<div style="text-align: center;">
			<button id="previous_step">上一步</button>
			<button id="next_step">下一步</button>
	</div>
</div>

相关推荐

发表评论

相关文章