jQuery时间节点发展历程特效代码下载


jQuery时间节点发展历程特效代码下载
jQuery时间节点发展历程特效代码下载以及时间节点、发展历程等js/jquery网页特效代码下载。

1. 引入JS

<script src="../js/jquery.js"></script>

2. HTML代码

	<div class="w_box clearfix sp_page2_area">
		<div class="sp_page2">
			<ul class="timePointAreaSp">
				<li class="time_point_list active">
					<div class="txt_area">
						<div class="tips_area">便签文字内容1</div>
						<div class="content_area">
							<div class="time_point timePoint">
								<span>2019.01</span>
								<em style="background-image: url(../images/sp_page2_point1.png);"></em>
								<em class="light" style="background-image: url(../images/sp_page2_point2.png);"></em>
							</div>
							<div class="content">
								<h3>阶段标题1</h3>
								<p>文字内容1</p>
								<p>文字内容2</p>
								<p>文字内容3</p>
								<p>文字内容4</p>
							</div>
						</div>
						<div class="version_area">
							<div class="rang_version">版本1.0</div>
							<div class="rang_content">
								<p>参数1<strong>ABC</strong></p>
								<p>参数2<strong>ABC</strong></p>
							</div>
						</div>
					</div>
				</li>
				<li class="time_point_list">
					<div class="txt_area">
						<div class="tips_area">便签文字内容2</div>
						<div class="content_area">
							<div class="time_point timePoint">
								<span>2022.08</span>
								<em style="background-image: url(../images/sp_page2_point1.png);"></em>
								<em class="light" style="background-image: url(../images/sp_page2_point2.png);"></em>
							</div>
							<div class="content">
								<h3>阶段标题2</h3>
								<p>文字内容1</p>
								<p>文字内容2</p>
								<p>文字内容3</p>
								<p>文字内容4</p>
							</div>
						</div>
						<div class="version_area">
							<div class="rang_version">版本2.0</div>
							<div class="rang_content">
								<p>参数1<strong>BCD</strong></p>
								<p>参数2<strong>BCD</strong></p>
							</div>
						</div>
					</div>
				</li>
				<li class="time_point_list">
					<div class="txt_area">
						<div class="tips_area">便签文字内容3</div>
						<div class="content_area">
							<div class="time_point timePoint">
								<span>2024.08</span>
								<em style="background-image: url(../images/sp_page2_point1.png);"></em>
								<em class="light" style="background-image: url(../images/sp_page2_point2.png);"></em>
							</div>
							<div class="content">
								<h3>阶段标题3</h3>
								<p>文字内容1</p>
								<p>文字内容2</p>
								<p>文字内容3</p>
								<p>文字内容4</p>
							</div>
						</div>
						<div class="version_area">
							<div class="rang_version">版本3.0</div>
							<div class="rang_content">
								<p>参数1<strong>CDE</strong></p>
								<p>参数2<strong>CDE</strong></p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			 $('.timePointAreaSp .timePoint').click(function(){
		        $(this).parents('.time_point_list').addClass('active').siblings().removeClass('active');
		    })
		})
	</script>

相关推荐

发表评论

相关文章