jQuery时间轴节点内容提示ui布局特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 38 13



特效描述:时间轴 节点内容 提示ui布局。jQuery创意的时间轴节点分支提示文本内容效果。1.根据时间节点显示相应内容。2.支持时间段之间的内容显示。3.时间时间节点上方的六边形,切换显示相应内容

代码结构

1. 引入JS

<script src="js/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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 时间轴 日历选择器 时间日期插件 日历日期时间

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到