CSS / JavaScript 响应式时间轴特效
网上有个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 发布,如需转载请注明出处。