您没有登录或者您没有权限访问此页面，可能有如下几个原因
1、本版块为正规版块,只有注册会员才能进入!
2、违法和不良信息举报电话： 转2004
举报邮箱：
使用合作网站帐号登录QQ空间特效怎么弄？_百度知道
QQ空间特效怎么弄？
提问者采纳
. 空间中.我是觉得不用最好本人搞空间.3类是最棒的了.谁都可以搞的好的.你要加油.那都是不好的.了 我可以教你,我想我一定有能力帮你的. 至于什么免费的QQ空间.我可以教你&#47..你们会觉得很难.这..也是现在最流行的.就看你学不学咯!.只你用心!你要是想学.只要.要有一定的个性.你好.谢谢蛤.最最实用的 但是.. 楼主.摸不着头脑;也很快. 所以..FLASH FD PS图.有的还有病毒,又难看的.祝你空间人气旺旺.10分钟,只有很少一部分的人知道怎么做.所以.其实想装扮好空间一点都不难.3年了.什么免费的皮肤呀
其他类似问题
为您推荐：
qq空间的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁JS时间轴效果(类似于qq空间时间轴效果) - 龙恩0707 - 推酷
JS时间轴效果(类似于qq空间时间轴效果) - 龙恩0707
&&&&&& 在上一家公司写了一个时间轴效果，今天整理了下，感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方，希望大家多指点指点下，此效果类似于QQ空间或者人人网空间时间轴效果，当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的)，只是当时研究了下他们HTML结构和css结构，所以仿照他们那种逻辑自己也写了一个出来。先来看看是个什么样的吧！如下图所示：
需求分析：左侧是一个时间列表 右侧是一个时间控制抽，当时的需求是这样的：默认页面一打开 只加载当前年份所有列表加载出来 当前年份的控制轴展开出来，默认的焦点在最近的月份，如上图在当前的10月份或者下图的12月份，当滚动条滚动的时候再继续判断 如果左侧滚动到几月份的时候 那么右侧控制抽当前的焦点也在几月份，当滚动到上一个年份的时候 那么当前的年份控制轴收缩起来 上一个年份控制轴展开出来，如下图所示：
当我们点击某一年份的时候 滚动到当前的年份，当我点击某一年中某一月份的时候 滚动到当前年份中对应的月份上来。
当然下面的代码我是用到的是淘宝的KISSY框架& 当然如果改成Jquery框架也是一样的,没有很大的差别 只是用了一下&延迟加载&和一些选择器而已，首先我们如果要做成这样的话 要知道有2个请求 一个是左侧列表请求返回的数据 一个是右侧的年份和月份返回的数据 下面我们可以先来看看 开发给我当时返回的数据格式是个什么样的，
左侧列表的JSON数据如下图：
默认情况下是最近年份 当我滚动到2012年时候 再继续发个2012年的请求 把2012年的相对应的数据渲染出来，同理2011年也一样.
再来看看年份和月份的JSON数据吧 如下图：
下面我一步步来分析下 我当时的做法：
1. 首先我需要HTML结构 如下图所示：
&div class=&tao-allMonth-w990&&
&div class=&tao-video-left J_Video_Left& id=&J_Video_Left&&&/div&
&div class=&tao-year-right&&
&div class=&mod-timelinenav&&
&ul id=&timelinenavpanel& class=&timelinenav-panel isScroll&&&/ul&
=&J_Video_Left&
=&timelinenavpanel&
在初始化的时候 是可以配置的 也就是说 他们叫什么名字并不重要，依赖于这个HTML结构。
2. 依赖于css代码 如下：
.tao-allMonth-w990 {width: 990margin: 100px auto 0;overflow: }
.tao-video-left {float:width: 620overflow:}
.tao-video-block {width: 620overflow:}
.tao-header-title {width: 100%;height: 26overflow:}
.tao-header-title {color: #FF6600;font-family: &Microsoft yahei&;font-size: 18font-weight: 700;padding-left: 42}
.tao-dottle-top {width: 10height: 40margin-left: 68background: none repeat scroll 0 0 #FFCC99;overflow: }
.tao-video-content {position:width: 620overflow:}
.tao-video-content .addBlock {
background: none repeat scroll 0 0 #FFCC99;
height: 16
.left-date {
color: #FF6600;
font-family: &Microsoft yahei&;
font-size: 14
height: 20
line-height: 20
margin-top: 18
.left-date span {
.tao-video-content .tao-line {
background: url(&/tps/i2/T1je8uXEBgXXagEfc2-10-205.png&) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 205
margin: 24px 0 0 8
.tao-inner-content {
background: url(&/tps/i3/T16VXtXBNiXXXPeW.X-519-190.png&) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 190
margin: 0 0 0 20
width: 519
.tao-inner-block {
height: 130
margin: 30px 0 0 40
width: 450
.tao-inner-block .inner-left {
height: 130
width: 230
.inner-left .alink {
height: 130
width: 230
.inner-left .alink img {
height: 130
width: 230
.tao-inner-block .icon-player {
background: url(&/tps/i2/T1J5FFXy8cXXaiphQj-60-145.png&) no-repeat scroll 0 -40px rgba(0, 0, 0, 0);
height: 50
z-index: 10;
.inner-right {
height: 130
width: 202
.inner-date {
color: #666666;
font-family: &Tahoma&;
.inner-title {
height: 22
line-height: 22
margin-top: 5
width: 202
.inner-title a {
color: #333333;
font-family: &Microsoft yahei&;
font-size: 18
font-weight: 700;
.inner-title a:hover {
color: #FF1155;
text-decoration:
.inner-content {
color: #999999;
line-height: 18
margin-top: 12
.tao-year-right {
width: 311
.tao-year-right .mod-fixed {
z-index: 10;
.mod-timelinenav {
margin-top: 20
.mod-timelinenav .yearlink {
display: inline-
.mod-timelinenav a {
display: inline-
.mod-timelinenav a:hover {
text-decoration:
.mod-timelinenav .yearlink, .mod-timelinenav .monthlink {
border-left: 10px solid #74C2FA;
color: #7FCCFF;
font-family: &Tahoma&;
line-height: 20
padding-left: 8
.mod-timelinenav .norecord {
.mod-timelinenav .active .yearlink, .mod-timelinenav .active .monthlink {
border-left: 10px solid #0099FF;
color: #0099FF;
font-family: &Tahoma&;
line-height: 20
padding-left: 8
.mod-timelinenav .active .monthlink {
color: #7FCCFF;
.mod-timelinenav .highlight .monthlink {
color: #0099FF;
font-family: &Tahoma&;
.mod-timelinenav .active .timelinenav-mpanel {
.mod-timelinenav .timelinenav-mpanel {
.timelinenav-panel {
.timelinenav-panel li {
margin: 1px 0;
.timelinenav-panel li.active, .timelinenav-panel li.active .timelinenav-mpanel li {
margin: 0;
.hot-footage {
bottom: 0;
width: 311
z-index: 8;
.hot-footage .dottle {
border-top: 1px solid #CCCCCC;
.hot-title {
margin-top: 12
.hot-icon {
background: none repeat scroll 0 0 #FF6600;
height: 28
margin-top: 10
.hot-title h3 {
color: #333333;
font-family: &Microsoft yahei&;
font-size: 30
font-weight: 500;
padding-left: 10
.hot-list {
margin-top: 5
width: 311
.hot-list li {
height: 150
margin: 5px 10px 0 0;
width: 150
.hot-list li.last {
margin-right: 0;
.hot-list li a {
height: 100
width: 150
.hot-list .icon-player {
background: url(&/tps/i2/T1J5FFXy8cXXaiphQj-60-145.png&) no-repeat scroll 0 -40px rgba(0, 0, 0, 0);
height: 50
z-index: 10;
.hot-date {
color: #666666;
font-family: &Tahoma&;
height: 18
line-height: 18
margin-top: 5
.hot-desc a:hover {
text-decoration:
&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. i & 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&' +
var recentlyYear = yearlists[0].
D.html(D.get(_config.videoContainer),yearHTML);
* 把控制轴上的所有年份渲染出来
for(i = 0,itemLen = yearlists. i & itemL i++){
liHTML += '&li data-year=&'+yearlists[i].year+'& class=&itemList&&' +
'&a class=&yearlink& href=&#&&'+yearlists[i].year+'年&/a&' +
'&ul class=&timelinenav-mpanel&&&/ul&' +
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. m & m+=1) {
var ulHTML = &&;
for(var k = 0,subItems = yearlists[m].month. k & subI 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&' +
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. 接着发请求 把左侧列表中最近年份 下的所有月份渲染出来 如下代码可以实现：
var self = this,
_config = self.
var allYears = D.query(&.J_Year_Month&);
S.each(allYears,function(everyYear,index){
var jYear = D.get(&.J_Year&,everyYear),
jDataYear = D.attr(jYear,&data-year&),
jTextArea = D.get(&.J_Video_Block&,everyYear);
S.jsonp(_config.list_url+&&group=&+jDataYear+&&timestamp=&+S.now(),function(data){
if(data.isSuccess){
var dataLists = data.list,
dataContainer = &&;
for(var x=0,xlen=dataLists. x& x+=1){
var tempGroupId = dataLists[x].group_
dataContainer +='&div class=&tao-video-content&&'+
'&div class=&addBlock&&&/div&' +
'&div class=&left-date& videoMonth=&'+tempGroupId.substring(4,6)+'&&'+
'&span&&i class=&J_Month& M_year=&'+tempGroupId.substring(0,4)+'&&'+tempGroupId.substring(4,6)+'&/i&月&/span&'+
'&span&&i class=&J_Day&&'+tempGroupId.substring(6,8)+'&/i&日&/span&'+
'&div class=&tao-line&&&/div&'+
'&div class=&tao-inner-content&&'+
'&div class=&tao-inner-block&&'+
'&div class=&inner-left&&'+
'&a href=&/apps.php?q=tvshow&m=detail_new&tid='+dataLists[x].tid+'& class=&alink&&'+
'&img src=&'+dataLists[x].video_pic.replace(&/0&,&/1&)+'& alt=&&&'+
'&span class=&icon-player&&&/span&'+
'&div class=&inner-right&&'+
'&p class=&inner-date&&'+tempGroupId.substring(0,4)+'-'+tempGroupId.substring(4,6)+'-'+tempGroupId.substring(6,8)+'&/p&'+
'&p class=&inner-title&&' +
'&a href=&/apps.php?q=tvshow&m=detail_new&tid='+dataLists[x].tid+'&&'+dataLists[x].subject+'&/a&'+
'&div class=&inner-content&&'+dataLists[x].content+'&/div&'+
if(flag == 'hover') {
(new DataLazyload(everyYear, {diff: 200})).addCallback(everyYear, function(){
self._isDelayLoad(jTextArea,dataContainer,index);
我上面的代码也有个小缺点 就是说页面一打开的时候 联系发了四个请求 把所有年份都渲染出来 但是数据并没有到页面上来 还是以前的逻辑 当滚动条滚动到离还有200像素的时候 再把数据渲染到页面上来。
5. 接着再做了以下事情：
&&&& 1.& 列表中的年份和控制轴中的年份相等时候 控制轴的年份展开。
& 2.& 当滚动到列表中年份中的月份时候 对应的控制轴月份也要相应的变化(如高亮等)，随着鼠标滚动。
& 3.& 点击控制轴任一年份时候 滚动到条目列表中相对应的年份来.
var self = this,
_config = self.config,
_cache = self.
D.html(jTextArea,dataContainer,false,function(){
var itemLists = D.query(_config.listContainer + & .itemList&),
itemHover = D.query(&.itemHover&,itemLists[index]),
jmonths = D.query(&.J_Month&,jTextArea[index]),
headerTitle = D.query(&.J_Year&);
// 默认时候 当前年份 最近月份高亮
D.addClass(D.get(&.itemHover&),_config.highlightCls);
var storage = function(itemFChar){
for(var i = 0, ilen = itemHover. i & i+=1){
var itemMonth = D.attr(itemHover[i],&data-month&);
if(itemMonth == itemFChar){
KISSY.all(itemHover[i]).addClass(_config.highlightCls).siblings().removeClass(_config.highlightCls);
E.on(window,'scroll',function(){
if(D.hasClass(D.get(_config.listContainer),'isScroll')){
var wTop = D.offset(window).
/*** 列表中的年份和控制轴中的年份相等时候 控制轴的年份展开 ***/
for(var m=0,mlen=headerTitle. m& m+=1){
var headerTop = D.offset(headerTitle[m]).top,
headAttr = D.attr(headerTitle[m],&data-year&),
itemAttr = D.attr(itemLists[m],&data-year&);
if(headerTop &= wTop){
if(headAttr == itemAttr){
KISSY.all(itemLists[m]).addClass(_config.activeCls).siblings().removeClass(_config.activeCls);
/*** 当滚动到列表中年份中的月份时候 对应的控制轴月份也要相应的变化(如高亮等) **/
for(var nn = 0, nlen = jmonths. nn & nn+=1){
var jmonthTop = D.offset(jmonths[nn]).
if(jmonthTop &= wTop){
var itemVal = D.html(jmonths[nn]),
// 转换02 -& 2
itemFChar = itemVal.substring(0,1);
if(itemFChar == 0){
itemFChar = itemVal.substring(1,2);
itemFChar = itemVal.substring(0,2);
storage(itemFChar);
// 点击控制轴任一年份时候 滚动到条目列表中相对应的年份来
var itemLists = D.query(_config.listContainer + & .itemList&);
S.each(itemLists,function(item,index){
var innerI
E.on(item,'click',function(e){
e.preventDefault();
innerIndex =
var scrollTimer,
DELAY = 0.3;
!D.hasClass(KISSY.all(this),_config.activeCls) && KISSY.all(this).addClass(_config.activeCls).siblings().removeClass(_config.activeCls);
if(!D.hasClass(KISSY.all(this),&isClick&)){
D.addClass(KISSY.all(this),&isClick&);
var curThis = KISSY.all(this);
D.hasClass(D.get(_config.listContainer),'isScroll') && D.removeClass(D.get(_config.listContainer),'isScroll');
var headerTop = D.offset(headerTitle[index]).
scrollTimer && scrollTimer.cancel();
scrollTimer = S.later(function(){
KISSY.all(&html,body&).animate({&scrollTop&:headerTop},DELAY,'easeBothStrong',function(){
D.removeClass(D.query(&.itemHover&),_config.highlightCls);
!D.hasClass(D.get(&.itemHover&,curThis),_config.highlightCls) && D.addClass(D.get(&.itemHover&,curThis),_config.highlightCls);
!D.hasClass(D.get(_config.listContainer),'isScroll') && D.addClass(D.get(_config.listContainer),'isScroll');
_config.yearCallback && S.isFunction(_config.yearCallback) && _config.yearCallback();
self._clickMenu(itemLists,innerIndex);
if(innerIndex == undefined){
innerIndex = 0;
self._clickMenu(itemLists,innerIndex);
&6. 最后 点击控制轴当前年份中的月份时候 滚动到当前的月份的地方。代码如下：
// 点击控制轴当前年份中的月份时候 滚动到当前的月份的地方。
var itemHovers = D.query(&.itemHover&,KISSY.all(itemLists[innerIndex]));
S.each(itemHovers,function(itemHover,curIndex){
E.on(itemHover,'click',function(e){
var itemMonth = D.attr(KISSY.all(itemHover),&data-month&);
var tempArr = [],
scrollTimer,
DELAY = 0.1;
console.log(itemMonth);
var curMonths = D.query(&.left-date&,D.query(&.J_Year_Month&)[innerIndex]);
D.hasClass(D.get(_config.listContainer),'isScroll') && D.removeClass(D.get(_config.listContainer),'isScroll');
KISSY.all('.itemHover').removeClass(_config.highlightCls);
KISSY.all(this).addClass(_config.highlightCls).siblings().removeClass(_config.highlightCls);
for(var i=0; i&curMonths. i+=1){
var itemVal = D.attr(curMonths[i],&videoMonth&);
// 转换02 -& 2
var itemFChar = itemVal.substring(0,1);
if(itemFChar == 0){
itemFChar = itemVal.substring(1,2);
itemFChar = itemVal.substring(0,2);
tempArr.push(itemFChar);
for(var j=0; j&tempArr. j+=1){
var tempV = tempArr[j];
if(itemMonth == tempArr[j]){
var mtop = D.offset(curMonths[j]).
scrollTimer && scrollTimer.cancel();
scrollTimer = S.later(function(){
KISSY.all(&html,body&).animate({&scrollTop&:mtop},DELAY,'easeBothStrong',function(){
!D.hasClass(D.get(_config.listContainer),'isScroll') && D.addClass(D.get(_config.listContainer),'isScroll');
// 此break是当数组里面的月份有多个相同的时候 只取第一个月份
_config.monthCallback && S.isFunction(_config.monthCallback) && _config.monthCallback();
& 综合以上 所有JS代码如下：
KISSY.add('timeline/nav',function(S,DataLazyload){
var D = S.DOM,
function TimeLineNav() {
this.config = {
'/apps.php?q=tvshow&m=video_years',
//所有年份URL
'/apps.php?q=tvshow&m=video_group',
// 时间轴list列表 URL
// 延迟time
highlightCls
'highlight',
'mod-fixed',
// fixed类
// 当前active class
videoContainer
'#J_Video_Left',
// 左侧视频容器
listContainer
'#timelinenavpanel',
// 控制轴容器
yearCallback
// 点击某一项年份时的回调函数
monthCallBack
// 点击某一项月份时候回调
this.cache = {
TimeLineNav.prototype = {
init: function(options) {
this.config = S.augment(this.config,options || {});
var self = this,
_config = self.
* 发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. i & 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&' +
var recentlyYear = yearlists[0].
D.html(D.get(_config.videoContainer),yearHTML);
* 把控制轴上的所有年份渲染出来
for(i = 0,itemLen = yearlists. i & itemL i++){
liHTML += '&li data-year=&'+yearlists[i].year+'& class=&itemList&&' +
'&a class=&yearlink& href=&#&&'+yearlists[i].year+'年&/a&' +
'&ul class=&timelinenav-mpanel&&&/ul&' +
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. m & m+=1) {
var ulHTML = &&;
for(var k = 0,subItems = yearlists[m].month. k & subI 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&' +
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);
self._query('hover');
* 1.滚动条先滚动 当离顶部距离差距不大的时候 使右侧菜单固定在顶部20
var timelineTop = D.offset(&.mod-timelinenav&).top,
E.on(window,'scroll',function(){
scrollTimer && scrollTimer.cancel();
scrollTimer = S.later(function(){
var windowTop = D.offset(window).
if(timelineTop &=windowTop){
D.addClass(&.mod-timelinenav&,&mod-fixed&);
D.removeClass(&.mod-timelinenav&,&mod-fixed&);
},_config.delay);
_query: function(flag) {
var self = this,
_config = self.
var allYears = D.query(&.J_Year_Month&);
S.each(allYears,function(everyYear,index){
var jYear = D.get(&.J_Year&,everyYear),
jDataYear = D.attr(jYear,&data-year&),
jTextArea = D.get(&.J_Video_Block&,everyYear);
S.jsonp(_config.list_url+&&group=&+jDataYear+&&timestamp=&+S.now(),function(data){
if(data.isSuccess){
var dataLists = data.list,
dataContainer = &&;
for(var x=0,xlen=dataLists. x& x+=1){
var tempGroupId = dataLists[x].group_
dataContainer +='&div class=&tao-video-content&&'+
'&div class=&addBlock&&&/div&' +
'&div class=&left-date& videoMonth=&'+tempGroupId.substring(4,6)+'&&'+
'&span&&i class=&J_Month& M_year=&'+tempGroupId.substring(0,4)+'&&'+tempGroupId.substring(4,6)+'&/i&月&/span&'+
'&span&&i class=&J_Day&&'+tempGroupId.substring(6,8)+'&/i&日&/span&'+
'&div class=&tao-line&&&/div&'+
'&div class=&tao-inner-content&&'+
'&div class=&tao-inner-block&&'+
'&div class=&inner-left&&'+
'&a href=&/apps.php?q=tvshow&m=detail_new&tid='+dataLists[x].tid+'& class=&alink&&'+
'&img src=&'+dataLists[x].video_pic.replace(&/0&,&/1&)+'& alt=&&&'+
'&span class=&icon-player&&&/span&'+
'&div class=&inner-right&&'+
'&p class=&inner-date&&'+tempGroupId.substring(0,4)+'-'+tempGroupId.substring(4,6)+'-'+tempGroupId.substring(6,8)+'&/p&'+
'&p class=&inner-title&&' +
'&a href=&/apps.php?q=tvshow&m=detail_new&tid='+dataLists[x].tid+'&&'+dataLists[x].subject+'&/a&'+
'&div class=&inner-content&&'+dataLists[x].content+'&/div&'+
if(flag == 'hover') {
(new DataLazyload(everyYear, {diff: 200})).addCallback(everyYear, function(){
self._isDelayLoad(jTextArea,dataContainer,index);
_isDelayLoad: function(jTextArea,dataContainer,index) {
var self = this,
_config = self.config,
_cache = self.
D.html(jTextArea,dataContainer,false,function(){
var itemLists = D.query(_config.listContainer + & .itemList&),
itemHover = D.query(&.itemHover&,itemLists[index]),
jmonths = D.query(&.J_Month&,jTextArea[index]),
headerTitle = D.query(&.J_Year&);
// 默认时候 当前年份 最近月份高亮
D.addClass(D.get(&.itemHover&),_config.highlightCls);
var storage = function(itemFChar){
for(var i = 0, ilen = itemHover. i & i+=1){
var itemMonth = D.attr(itemHover[i],&data-month&);
if(itemMonth == itemFChar){
KISSY.all(itemHover[i]).addClass(_config.highlightCls).siblings().removeClass(_config.highlightCls);
E.on(window,'scroll',function(){
if(D.hasClass(D.get(_config.listContainer),'isScroll')){
var wTop = D.offset(window).
/*** 列表中的年份和控制轴中的年份相等时候 控制轴的年份展开 ***/
for(var m=0,mlen=headerTitle. m& m+=1){
var headerTop = D.offset(headerTitle[m]).top,
headAttr = D.attr(headerTitle[m],&data-year&),
itemAttr = D.attr(itemLists[m],&data-year&);
if(headerTop &= wTop){
if(headAttr == itemAttr){
KISSY.all(itemLists[m]).addClass(_config.activeCls).siblings().removeClass(_config.activeCls);
/*** 当滚动到列表中年份中的月份时候 对应的控制轴月份也要相应的变化(如高亮等) **/
for(var nn = 0, nlen = jmonths. nn & nn+=1){
var jmonthTop = D.offset(jmonths[nn]).
if(jmonthTop &= wTop){
var itemVal = D.html(jmonths[nn]),
// 转换02 -& 2
itemFChar = itemVal.substring(0,1);
if(itemFChar == 0){
itemFChar = itemVal.substring(1,2);
itemFChar = itemVal.substring(0,2);
storage(itemFChar);
// 点击控制轴任一年份时候 滚动到条目列表中相对应的年份来
var itemLists = D.query(_config.listContainer + & .itemList&);
S.each(itemLists,function(item,index){
var innerI
E.on(item,'click',function(e){
e.preventDefault();
innerIndex =
var scrollTimer,
DELAY = 0.3;
!D.hasClass(KISSY.all(this),_config.activeCls) && KISSY.all(this).addClass(_config.activeCls).siblings().removeClass(_config.activeCls);
if(!D.hasClass(KISSY.all(this),&isClick&)){
D.addClass(KISSY.all(this),&isClick&);
var curThis = KISSY.all(this);
D.hasClass(D.get(_config.listContainer),'isScroll') && D.removeClass(D.get(_config.listContainer),'isScroll');
var headerTop = D.offset(headerTitle[index]).
scrollTimer && scrollTimer.cancel();
scrollTimer = S.later(function(){
KISSY.all(&html,body&).animate({&scrollTop&:headerTop},DELAY,'easeBothStrong',function(){
D.removeClass(D.query(&.itemHover&),_config.highlightCls);
!D.hasClass(D.get(&.itemHover&,curThis),_config.highlightCls) && D.addClass(D.get(&.itemHover&,curThis),_config.highlightCls);
!D.hasClass(D.get(_config.listContainer),'isScroll') && D.addClass(D.get(_config.listContainer),'isScroll');
_config.yearCallback && S.isFunction(_config.yearCallback) && _config.yearCallback();
self._clickMenu(itemLists,innerIndex);
if(innerIndex == undefined){
innerIndex = 0;
self._clickMenu(itemLists,innerIndex);
_clickMenu: function(itemLists,innerIndex) {
var self = this,
_config = self.
if(innerIndex == undefined){
// 点击控制轴当前年份中的月份时候 滚动到当前的月份的地方。
var itemHovers = D.query(&.itemHover&,KISSY.all(itemLists[innerIndex]));
S.each(itemHovers,function(itemHover,curIndex){
E.on(itemHover,'click',function(e){
var itemMonth = D.attr(KISSY.all(itemHover),&data-month&);
var tempArr = [],
scrollTimer,
DELAY = 0.1;
console.log(itemMonth);
var curMonths = D.query(&.left-date&,D.query(&.J_Year_Month&)[innerIndex]);
D.hasClass(D.get(_config.listContainer),'isScroll') && D.removeClass(D.get(_config.listContainer),'isScroll');
KISSY.all('.itemHover').removeClass(_config.highlightCls);
KISSY.all(this).addClass(_config.highlightCls).siblings().removeClass(_config.highlightCls);
for(var i=0; i&curMonths. i+=1){
var itemVal = D.attr(curMonths[i],&videoMonth&);
// 转换02 -& 2
var itemFChar = itemVal.substring(0,1);
if(itemFChar == 0){
itemFChar = itemVal.substring(1,2);
itemFChar = itemVal.substring(0,2);
tempArr.push(itemFChar);
for(var j=0; j&tempArr. j+=1){
var tempV = tempArr[j];
if(itemMonth == tempArr[j]){
var mtop = D.offset(curMonths[j]).
scrollTimer && scrollTimer.cancel();
scrollTimer = S.later(function(){
KISSY.all(&html,body&).animate({&scrollTop&:mtop},DELAY,'easeBothStrong',function(){
!D.hasClass(D.get(_config.listContainer),'isScroll') && D.addClass(D.get(_config.listContainer),'isScroll');
// 此break是当数组里面的月份有多个相同的时候 只取第一个月份
_config.monthCallback && S.isFunction(_config.monthCallback) && _config.monthCallback();
return TimeLineN
},{requires:['datalazyload']});
& JS初始化如下 ：
& KISSY.use(&timeline/nav&,function(S,obj){
&& &&& new obj().init({});
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示