jQuery时间轴节点分支提示特效代码下载


jQuery时间轴节点分支提示特效代码下载
jQuery时间轴节点分支提示特效代码下载以及时间轴、节点分支提示等js/jquery网页特效代码下载。

1. 引入JS

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

2. HTML代码

	<div class="w_1220 clearfix page2_area">
		<div class="page2 clearfix">
			<ul class="clearfix timePointArea">
				<li class="time_point_list disabled" data-time="2019.01" style="width: 25%;">
					<div class="time_point img">
						<em class="disabled" style="background-image: url(page2_point2.png);"></em>
					</div>
					<div class="time_area">2019.01</div>
				</li>
				<li class="time_point_list enable active" data-time="2020.12" style="width: 33.3%;">
					<div class="time_point img">
						<em style="background-image: url(page2_point2.png);"></em>
						<em class="light" style="background-image: url(page2_point3.png);"></em>
					</div>
					<div class="time_area">2020.12</div>
					<div class="txt_area">
						<div class="tips_area">便签文字内容1</div>
						<div class="content_area">
							<h3>阶段标题1</h3>
							<div class="line_block">
								<span><strong>ABC</strong>作用1</span>
								<span><strong>ABC</strong>作用2</span>
							</div>
							<div class="line_block">
								<span><strong>ABC</strong>作用3</span>
								<span><strong>重要内容1</strong></span>
							</div>
						</div>
					</div>
				</li>
				<li class="time_point_list enable" data-time="2022.08">
					<div class="time_point img">
						<em style="background-image: url(page2_point2.png);"></em>
						<em class="light" style="background-image: url(page2_point3.png);"></em>
					</div>
					<div class="time_area">2022.08</div>
					<div class="txt_area">
						<div class="tips_area">便签文字内容2</div>
						<div class="content_area">
							<h3>阶段标题2</h3>
							<div class="line_block">
								<span><strong>BCD</strong>作用1</span>
								<span><strong>BCD</strong>作用2</span>
							</div>
							<div class="line_block">
								<span><strong>BCD</strong>作用3</span>
								<span><strong>重要内容2</strong></span>
							</div>
						</div>
					</div>
				</li>
				<li class="time_point_list enable" data-time="2024.08">
					<div class="time_point img">
						<em style="background-image: url(page2_point2.png);"></em>
						<em class="light" style="background-image: url(page2_point3.png);"></em>
					</div>
					<div class="time_area">2024.08</div>
					<div class="txt_area">
						<div class="tips_area">便签文字内容3</div>
						<div class="content_area">
							<h3>阶段标题3</h3>
							<div class="line_block">
								<span><strong>CDE</strong>作用1</span>
								<span><strong>CDE</strong>作用2</span>
							</div>
							<div class="line_block">
								<span><strong>CDE</strong>作用3</span>
								<span><strong>重要内容3</strong></span>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="time_rang_area timeRangeArea">
				<article class="time_rang" data-range="2019.01/2020.12" style="display: block;">
					<div class="rang_version">版本1.0</div>
					<div class="rang_content">
						<div class="line_block">
							<span class="marginR15px">参数1<strong>123</strong></span>
							<span>参数2<strong>123</strong></span>
						</div>
					</div>
				</article>
				<article class="time_rang" data-range="2020.12/2022.08">
					<div class="rang_version">版本2.0</div>
					<div class="rang_content">
						<div class="line_block">
							<span class="marginR15px">参数1<strong>234</strong></span>
							<span>参数2<strong>234</strong></span>
						</div>
					</div>
				</article>
				<article class="time_rang" data-range="2022.08/2024.08">
					<div class="rang_version">版本3.0</div>
					<div class="rang_content">
						<div class="line_block">
							<span class="marginR15px">参数1<strong>345</strong></span>
							<span>参数2<strong>345</strong></span>
						</div>
					</div>
				</article>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
	    var $timePointList = $(this).find('.timePointArea>li');
	    //根据列表个数来分配占比
	    var timePointLength = $timePointList.length;
	    var timePointWidth = 100/timePointLength;
	    $timePointList.css('width',timePointWidth + '%');
	    $timePointList.each(function(key, value){
	        if(key>(timePointLength/2 -1)){
	            $(this).addClass('reverse');
	        }
	    })
	    //计算timeRangeList的位置
	    var $timeRangeList = $(this).find('.timeRangeArea>article');
	    $timeRangeList.each(function(key, value){
	        var timeRange = $(this).data('range');
	        if(timeRange && timeRange.length > 0){
	            var timeRangeArr = timeRange.split('');
	            var startIndex = $('.timePointArea').find('[data-time="' + timeRangeArr[0]+'"]').index();
	            var endIndex = $('.timePointArea').find('[data-time="' + timeRangeArr[1]+'"]').index();
	            if(timeRangeArr[1]=='9999.99'){
	                var left = timePointWidth*startIndex;
	                $(this).css('left',left+'%');
	                $(this).css('width',timePointWidth+'%');
	            }else{
	                var left = timePointWidth*startIndex+timePointWidth*0.5;
	                $(this).css('left','calc('+left+'% - 80px)');
	                var width = timePointWidth*(endIndex - startIndex);
	                $(this).css('width','calc('+width+'% + 80px)');
	            }
	        }
	    })
	    //点击事件节点,切换显示的内容
	    $('.timePointArea .enable').click(function(){
	        $(this).addClass('active').siblings().removeClass('active');
	        $(this).siblings().children('.txt_area').fadeOut(400);
	        $(this).children('.txt_area').fadeIn(400);
	        var index = $(this).index();
	        var preDisabledLength = 0;
	        $timePointList.each(function(key,value){
	            if((key < index)&&($(this).hasClass('disabled'))){
	                preDisabledLength++;
	            }
	        })
	        $timeRangeList.eq(index - preDisabledLength).fadeIn(400).siblings().fadeOut(400);
	    })
	    $('.inner_fixed_area .page2_tab span').click(function(){
	        var index = $(this).index();
	        $('.inner_fixed_area .page2_tab span').removeClass('active');
	        $('.page2').removeClass('active');
	        $('.sp_page2').removeClass('active');
	        $(this).addClass('active');
	        $('.page2').eq(index).addClass('active')
	        $('.sp_page2').eq(index).addClass('active');
	    })
	})
	</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章