实例介绍
【实例简介】
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"); | |
| }; |
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论