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

CSS / JavaScript 响应式时间轴特效

4年前 (2021-12-15)HTML928


网上有个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 css3制作网页音乐盒播放器ui布局,支持mp3多首歌曲切换,带标题和进度条拖动音频播放代码。下载链接: https://pan.baidu.com...

React垂直手风琴收缩展示特效

React垂直手风琴收缩展示特效

基于React dom制作简洁黑色的垂直手风琴菜单收缩内容展示,支持滑动和多个菜单收缩展开效果,通过js获取标题和内容,直接修改文本即可使用。下载链接: htt...

bootstraps响应式健康医疗护理类网站模板

bootstraps响应式健康医疗护理类网站模板

简约大气的jQuery bootstraps响应式健康医疗护理类网站模板下载链接: https://pan.baidu.com/s/11l38ZnQEjcpWQ...

登录注册html源码

登录注册html源码

登录注册下载链接: https://pan.baidu.com/s/1zi2D0qhHiSgwYHiK5r0otw   提取码: r81y...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。