qq时光轴

qq时光轴案例

var nav = EO.$("#left");var adv = EO.$("#adv");var right = EO.$("#right");data.sort(function (a,b) {return new Date(b.date).getTime()-new Date(a.date).getTime();});var obj = [];// console.log(data);data.forEach(function (el) {var d = new Date(el.date);var y = d.getFullYear();var m = d.getMonth() 1;if (!obj[y])obj[y]={};if (!obj[y][m]) obj[y][m]=[];var snl=GetLunarDateString(d);el.nl=snl[0] '<br>' snl[1];el.very=(el.like/10000).toFixed(1) '万人觉得很赞';obj[y][m].push(el)});var arr =[];for(var y in obj){var str = `<dl class="year"><dt>${y}年</dt>`;var arr_m=[];for (var m in obj[y]){arr_m.unshift(`<dd class='month'>${m}月</dd>`);}str =arr_m.join('') `</dl>`;arr.unshift(str);}nav.innerHTML=arr.join('');var years_l =EO.$("#left dl");var months_l =EO.$("#left dd");years_l[0].classList.add("on");months_l[0].classList.add("on");arr=[];var temp = EO.$("#temp").innerHTML;for(y in obj ){str = `<dl class="year"><dt>${y}年</dt>`;arr_m=[];var str1='';for(m in obj[y]){str1=`<dd class='month' data-month='${m}月'>`;obj[y][m].forEach(function (d) {str1 =temp.replace("{nl}",d.nl).replace("{date}",d.date).replace("{intro}",d.intro).replace("{img}",d.media).replace("{like}",d.like).replace("{comment}",d.comment).replace("{verylike}",d.very)});arr_m.unshift(str1 "</dd>");}str =arr_m.join('') '</dl>';arr.unshift(str);}right.innerHTML=arr.join('');scoll();function scoll() {if (EO.getScroll(document).top>adv.offsetHeight){nav.style.position='fixed';nav.style.top='80px';}else {nav.style.position='';nav.style.top='';right.style.marginLeft="";}}var years_r =EO.$("#right dl");var months_r =EO.$("#right dd");years_l.forEach(function (el,i) {el.i=i});months_l.forEach(function (el,i) {el.i=i});EO.agentArr(nav,['dd','dt'],'click',function () {if (this.nodeName==="DT"){var dl =this.parentNode;var i = dl.i;change(window,years_r[i].offsetTop-80,30,10)}else {var i = this.i;change(window,months_r[i].offsetTop-80,30,10)}});window.onscroll=function () {scoll();var i = 0;while (i<years_l.length && years_r[i].offsetTop-120<EO.getScroll(document).top){i ;}i>0?--i:i;EO.clearClass(years_l,'on');years_l[i].classList.add("on");i=0;while (i < months_l.length && months_r[i].offsetTop-100<EO.getScroll(document).top){i}i>0?--i:i;EO.clearClass(months_l,'on');months_l[i].classList.add("on");};