700字范文 > JS时间轴效果(类似于qq空间时间轴效果)

JS时间轴效果(类似于qq空间时间轴效果)

时间：2022-08-06 11:05:02

-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑

在上一家公司写了一个时间轴效果，今天整理了下，感觉有必要写一篇博客出来给大家分享分享当然代码还有很多不足的地方，希望大家多指点指点下，此效果类似于QQ空间或者人人网空间时间轴效果，当时也是为了需求研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的)，只是当时研究了下他们HTML结构和css结构，所以仿照他们那种逻辑自己也写了一个出来。先来看看是个什么样的吧！如下图所示：

需求分析：左侧是一个时间列表右侧是一个时间控制抽，当时的需求是这样的：默认页面一打开只加载当前年份所有列表加载出来当前年份的控制轴展开出来，默认的焦点在最近的月份，如上图在当前的10月份或者下图的12月份，当滚动条滚动的时候再继续判断如果左侧滚动到几月份的时候那么右侧控制抽当前的焦点也在几月份，当滚动到上一个年份的时候那么当前的年份控制轴收缩起来上一个年份控制轴展开出来，如下图所示：

当我们点击某一年份的时候滚动到当前的年份，当我点击某一年中某一月份的时候滚动到当前年份中对应的月份上来。

当然下面的代码我是用到的是淘宝的KISSY框架当然如果改成Jquery框架也是一样的,没有很大的差别只是用了一下"延迟加载"和一些选择器而已，首先我们如果要做成这样的话要知道有2个请求一个是左侧列表请求返回的数据一个是右侧的年份和月份返回的数据下面我们可以先来看看开发给我当时返回的数据格式是个什么样的，

左侧列表的JSON数据如下图：

默认情况下是最近年份当我滚动到时候再继续发个的请求把的相对应的数据渲染出来，同理也一样.

再来看看年份和月份的JSON数据吧如下图：

下面我一步步来分析下我当时的做法：

1. 首先我需要HTML结构如下图所示：

其中 id="J_Video_Left" 和 id="timelinenavpanel" 在初始化的时候是可以配置的也就是说他们叫什么名字并不重要，依赖于这个HTML结构。

2. 依赖于css代码如下：

3. 当然更依赖于kissy哦要引入kissy：<script src="/??s/kissy/1.2.0/kissy-min.js"></script>

现在框架已经搭建好了，接下来我来分析下当时我写的JS代码。首先我想渲染左侧年份列表出来及右侧控制轴渲染出来如下图：

所以上面的代码是渲染年份列表的如下：

/* * 发jsonp请求 * 1.渲染列表中的所有年份HTML出来* 2.把控制轴上的所有年份及月份及条目列表中的年份渲染出来*/S.jsonp(_config.year_url + "&timestamp="+S.now(),function(data){ _renderYear(data); }); function _renderYear(data) { if(data.isSuccess) { var yearlists = data.list, yearHTML = '', liHTML = ''; /* * 渲染列表中的所有年份HTML出来 */ for(var i = 0, ilen = yearlists.length; i < ilen; i+=1) { yearHTML += '<div class="J_Year_Month">'+ '<div class="tao-header-title J_Header_Title">'+ '<span data-year="'+yearlists[i].year+'" class="J_Year">'+yearlists[i].year+'<i>年</i></span>'+ '</div>' + '<div class="tao-dottle-top"></div>' + '<div class="J_Video_Block"></div>' + '</div>'; } var recentlyYear = yearlists[0].year; D.html(D.get(_config.videoContainer),yearHTML); /* * 把控制轴上的所有年份渲染出来 */ for(i = 0,itemLen = yearlists.length; i < itemLen; i++){ liHTML += '<li data-year="'+yearlists[i].year+'" class="itemList">' + '<a class="yearlink" href="#">'+yearlists[i].year+'年</a>' + '<ul class="timelinenav-mpanel"></ul>' + '</li>'; } D.html(D.get(_config.listContainer),liHTML,false,function(){ D.addClass(D.get(_config.listContainer + " li"),_config.activeCls); D.attr(D.get(_config.listContainer + " li"),{"index":"1"}); }); /* * 分别渲染各个年份中的月份 */ var monthContainers = D.query(".timelinenav-mpanel"); for(var m = 0, mlen = monthContainers.length; m < mlen; m+=1) { var ulHTML = ""; for(var k = 0,subItems = yearlists[m].month.length; k < subItems; k+=1){ ulHTML += '<li data-year="'+yearlists[m].year+'" data-month="'+yearlists[m].month[k]+'" class="itemHover">' + '<a class="monthlink" href="#">'+yearlists[m].month[k]+'月</a>' + '</li>'; } D.html(monthContainers[m],ulHTML,false,function(){ var headerTitle = D.query(".J_Year"), itemLists = D.query(".itemList"), videoBlocks = D.query(".J_Video_Block"); // 默认时候当前年份最近月份高亮 D.addClass(D.get(".itemHover"),_config.highlightCls); }); }

4. 接着发请求把左侧列表中最近年份下的所有月份渲染出来如下代码可以实现：

我上面的代码也有个小缺点就是说页面一打开的时候联系发了四个请求把所有年份都渲染出来但是数据并没有到页面上来还是以前的逻辑当滚动条滚动到离还有200像素的时候再把数据渲染到页面上来。

5. 接着再做了以下事情：

1. 列表中的年份和控制轴中的年份相等时候控制轴的年份展开。

2. 当滚动到列表中年份中的月份时候对应的控制轴月份也要相应的变化(如高亮等)，随着鼠标滚动。

3. 点击控制轴任一年份时候滚动到条目列表中相对应的年份来.

代码如下：

6. 最后点击控制轴当前年份中的月份时候滚动到当前的月份的地方。代码如下：

综合以上所有JS代码如下：

JS初始化如下：

KISSY.use("timeline/nav",function(S,obj){

new obj().init({});