当前位置:首页 > 技术博客 > HTML > CSS / JavaScript 响应式时间轴特效

CSS / JavaScript 响应式时间轴特效

admin2年前 (2021-12-15)HTML651


网上有个VUE版本的,这是一个朋友找我写的jQuery版本【原创】,分享一下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css+js响应式时间轴特效</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
	body{background-color:#f5f4f4}.ui-timeLine{padding:50px 0;position:relative;overflow:hidden}.ui-timeLine>.item{display:block;position:relative;text-align:justify;text-justify:newspaper;word-break:break-all;padding-left:50px;color:#fff;padding-right:10px}.ui-timeLine>.item>.box{padding:5px 0}.ui-timeLine>.item .cbox{position:relative;left:100vw;transition:left 1s;padding:10px;border-radius:10px;background-image:linear-gradient(45deg,rgba(0,200,255,0.4) 0,rgba(132,43,171,0.4) 100%);box-shadow:3px 3px 8px #ccc}.ui-timeLine>.item::after{content:"";display:block;clear:both}.ui-timeLine .dot{z-index:100;display:inline-block;position:absolute;left:25px;top:0;padding:3px;border:3px solid #eee;border-radius:20px;background-color:#fff;box-shadow:3px 3px 8px #ccc;transition:.5s}.ui-timeLine .active{border:3px solid rgba(132,43,171,.8)}.ui-timeLine .line,.ui-timeLine>.activeLine{position:absolute;left:29px;width:4px;height:100%;background-color:#eee}.ui-timeLine .date{font-size:14px;font-weight:900}.ui-timeLine .title{font-size:16px;font-weight:900;line-height:30px}.ui-timeLine .types>span{font-size:10px;border-radius:5px;padding:2px 10px;margin-right:10px;border:1px solid #fff}.ui-timeLine>.activeLine{background-color:rgba(0,200,255,.8);z-index:50;top:50px;height:0;max-height:calc(100% - 80px);transition:height 1s;box-shadow:3px 3px 2px #eee}
</style>
</head>
<body>

<div class="ui-timeLine">
	<div class="activeLine"></div>
</div>

<script>
	let timeLinecenter = [
		{
			date : '2020-02-05',
			title : '这是标题1',
			types : '类型1'
		},
		{
			date : '2020-03-15',
			title : '这是标题2',
			types : '类型2'
		},
		{
			date : '2020-04-25',
			title : '这是标题3',
			types : '类型3'
		},
		{
			date : '2020-05-11',
			title : '这是标题4',
			types : '类型4'
		},
		{
			date : '2020-05-05',
			title : '这是标题5',
			types : '类型5'
		},
		{
			date : '2020-09-05',
			title : '这是标题6',
			types : '类型6'
		},
		{
			date : '2021-09-05',
			title : '这是标题7',
			types : '类型7'
		},
		{
			date : '2021-11-09',
			title : '这是标题8',
			types : '类型8'
		},
		{
			date : '2021-11-15',
			title : '这是标题9',
			types : '类型9'
		},
		{
			date : '2021-12-05',
			title : '这是标题10',
			types : '类型10'
		},
		{
			date : '2021-12-15',
			title : '这是标题11',
			types : '类型11'
		},

		//只要你有足够的需求,可以一直无限的写下去

	]; 

	var jsonLength = 0;
	for(var item in timeLinecenter){
		jsonLength++;
	}
	 	 
	for(i=0; i<jsonLength; i++){
		var TtimeLinecenter = "<a class='item'><div class='line'></div><div class='dot'></div><div class='box'><div class='cbox'>" + timeLinecenter[i].date + "<div class='date'></div><div class='title'>" + timeLinecenter[i].title + "</div><div class='types'><span>" + timeLinecenter[i].types + "</span></div></div></div></a>";
		$(".ui-timeLine").prepend(TtimeLinecenter);
	} 

	(function($) {
		$.fn.uiTimeLine = function () {
			var $timeLine = $(".ui-timeLine");
			var $activeLine = $(".ui-timeLine .activeLine");
			var $dots = $(".ui-timeLine .dot");
			var $cboxs = $(".ui-timeLine .item .cbox");
			  this.each(function() {
				function setActiveLineHeight() {
					let height = $(document).scrollTop() + window.screen.height;
					let j = 0;
					for (let i = 0; i < $dots.length; i++) {
						if ($($dots[i]).offset().top < height) {
							$($($dots[i])).addClass("active");
							$($cboxs[i]).css({
								"left": 0
							});
							j = i;
						} else {
							$($($dots[i])).removeClass("active")
							$($cboxs[i]).css({
								"left": "100vw"
							});
						}
					}
					$activeLine.css({
						"height": $($dots[j]).offset().top - $timeLine.offset().top + 40 + "px"
					})
				}
				$(window).on('scroll', setActiveLineHeight);
				setActiveLineHeight();
			})
		}
	})(jQuery);
	$(".ui-timeLine").uiTimeLine(); 

</script>

</body>
</html>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/234.html

相关文章

html5的inputType

html5的inputType

属性值说明email限制用户输入的内容必须是Email类型url限制用户输入的内容必须是url类型date限制用户输入的内容必须是日期类型time限制用户输入的...

产品分类图片列表tab切换特效

产品分类图片列表tab切换特效

jQuery制作简洁的产品分类图片列表tab布局,带标题和分类菜单的图文列表选项卡切换特效。...

品牌运动鞋服商城HTML5模板

品牌运动鞋服商城HTML5模板

一款多用途的运动鞋,运动服装,体育用品电子商务HTML5模板。可用于时尚、服装、太阳镜、配饰、大型商店、手表、化妆品、衣服、包、包商店、化妆品、手表商店类商城模...

简洁的创意家居商城模板html源码

简洁的创意家居商城模板html源码

Outstock是一个最独特的电子商务网上购物商城HTML模板。Outstock将让你的商品看起来更令人印象深刻,对观众的吸引力。响应式设计网格布局,你的网站将...

黑色的分类下拉菜单选择ui特效

黑色的分类下拉菜单选择ui特效

html5基于svg制作制作黑色简洁的带图标分类的下拉菜单,点击选中下拉菜单效果。可用于各大网站分类菜单选择特效。css代码html { &...

动态罗盘时钟

动态罗盘时钟

原生抖音罗盘时钟代码分享 罗盘文字时钟软件非常火 文字时钟本站给大家分享这款就是通过原生j来s实现的文字时钟源码,有喜欢的朋友可以下载哦下载链接: https:...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌