8月6号--时光轴

body设置

       body{
        background:no-repeat fixed; //设置壁纸固定，不重复
        box-shadow:0 1px 0 rgba(0, 0, 0, .2);  // 水平位移，垂直位移，模糊半径，阴影颜色
        background: rgba(255, 255, 255, .2);  // RBG设置颜色
        text-decoration:underline;  // 下划线，none正常
        clear:both;  // 清除浮动，none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象
        border-radius:4px;
        }
        #triangle {  // 三角
            width: 0;
            height: 0;
            border-color: transparent transparent green transparent;  // 上，右，下，左，将transparent改成相应的颜色，就会显示相应位置三角，下绿
            border-width: 10 px 10 px 10 px 10 px;
            border-style: solid solid solid solid;
        }

        .content_item_icon_dot {  // 圆圈，时光轴上的效果，加一个小圆圈
            width: 11 px;
            height: 11px;
            border-radius: 11px;
            background: #fff;
        }

时光轴只要html代码：

id=hide的div中是为整个html设计一个模版，里边的{year},{month}取自，data.js,如下

data.js:

var data = [];

data.push({

    'date' : '……',

    'intro': '……',

    'media': '图片连接 img ',

 

})

省略号的值可以自行取值，可以添加多个adta.push({})，设置多组值，取出的是一个list。

下面是主要的控件js，控制字体高亮，自动展开，点击定位等：

        var g = function (id) {         //通用函数的设置，获取id的函数
            return document.getElementByIdx_x_x_x(id);
        }
        var g_class = function (className) {      //获取class的函数，存在浏览器的差异
            return document.getElementsByClassName(className);
        }
        var g_tpl = function (id) {              //获取相关tpl_id的函数
            return g('tpl_' + id).innerHTML;
        }
        var get_body_w = function () {             //获取body的宽
            return document.body.offsetWidth;
        }
        var get_body_h = function () {           //获取body的高
            return document.body.offsetHeight;
        }
        //格式化数据
        var list = {};
        for (var i = 0; i
             var date = new Date(data[i].date);      //获取date的值
        var year = date.getFullYear();             //通过js方法转化为时间格式
        var month = date.getMonth() + 1;      //月份格式
        if (!list[year]) {
            list[year] = {}
        }
        if (!list[year][month]) {
            list[year][month] = []
        }
        var item = data[i];
        item.year = year;
        item.month = month;
        list[year][month].push(item);           //获取正文的数据
        }
        ;
        //时间轴的设置
        var html_scrubber_list = [];
        var tpl_year = g_tpl('scrubber_year');
        var tpl_month = g_tpl('scrubber_month');
        for (y in list) {
            var html_year = tpl_year.replace(/\{year\}/g, y);
            var html_month = [];
            for (m in list[y]) {
                html_month.unshift(tpl_month.replace(/\{month\}/g, m).replace(/\{year\}/g, y));
            }
            html_year = html_year.replace(/\{list\}/g, html_month.join(''));
            html_scrubber_list.push(html_year);
        }
        g('scrubber').innerHTML = '最近' + html_scrubber_list.join('') + '最早';
        //主题内容的设置
        var html_content_list = [];
        var tpl_year = g_tpl('content_year');
        var tpl_month = g_tpl('content_month');
        var tpl_item = g_tpl('content_item');

        for (y in list) {
            var html_year = tpl_year.replace(/\{year\}/g, y);
            var html_month = [];
            for (m in list[y]) {
                var html_item = [];
                var isFirst_at_month = true;
                for (i in list[y][m]) {
                    var item_data = list[y][m][i];
                    var item_html = tpl_item.replace(/\{date\}/g, item_data.date)
                            .replace(/\{intro\}/g, item_data.intro)
                            .replace(/\{media\}/g, item_data.media)
                            .replace(/\{position\}/, i % 2 ? 'right' : 'left')
                            .replace(/\{isFirst\}/, isFirst_at_month ? 'first' : '');
                    html_item.push(item_html);
                    isFirst_at_month = false;
                }
                
                html_month.unshift(tpl_month.replace(/\{year\}/g, y).replace(/\{month\}/g, m).replace(/\{list\}/g, html_item.join('')));
            }
            html_year = html_year.replace(/\{list\}/g, html_month.join(''));
            html_content_list.push(html_year);
        }
        g('content').innerHTML = html_content_list.join('') + '最早';

        var get_top = function (el) {
            return el.offsetTop + 170;
        }
        var scroll_top = function (to) {           //点击最开始与结尾的跳转函数
            var start = document.body.scrollTop;
            fx(function (now) {
                window.scroll(0, now);
            }, start, to)
            window.scroll(0, to);
        }
        var show_year = function (year) {       //点击年份跳转
            console.log(year)
            var c_year = g('content_year_' + year);
            var top = get_top(c_year);
            scroll_top(top);
            expand_year(year, g('scrubber_year_' + year));
        }
        var show_month = function (year, month) {        //点击月份跳转
            console.log(year, month);
            var c_month = g('content_month_' + year + '_' + month);
            var top = get_top(c_month);
            scroll_top(top);
        }
        //年份展开函数
        var expand_year = function (year, element) {
            var months = g_class('scrubber_month');
            var years = g_class('scrubber_year');
            var show_month = g_class('scrubber_month_in_' + year);
// 清理所有年份的 cur 样式
            for (vari = months.length - 1; i >= 0; i--) {
                months[i].style.display = 'none';
            }
            for (var i = show_month.length - 1; i >= 0; i--) {     // 隐藏所有的月份
                show_month[i].style.display = 'block';
            }
            for (var i = years.length - 1; i >= 0; i--) {              // 展现当前年份下所有的月份
                years[i].className = years[i].className.replace(/current/g, '');
            }
            element.className = element.className + ' current';    //  设置当前年份的 cur 样式
        }
        // 根据窗口滚动条更新时序年份状态
        var update_scrubber_year = function (top) {
            var years = g('content').getElementsByClassName('content_year');
            var tops = [];
            for (var i = 0; i < years.length; i++) {
                tops.push(years[i].offsetTop);
            }
            for (var i = 1; i < tops.length; i++) {
                if (top > tops[i - 1] && top<>) {
                    var year = years[i - 1].innerHTML;
                    var s_year = g('scrubber_year_' + year);
                    expand_year(year, s_year);
                }
            }
        }
        // 滚动条事件处理; 定位时间，窗口改变事件处理; 保持时序列表的位置
        window.onscroll = function () {
            var top = document.body.scrollTop;
            var scrubber = g('scrubber');
            if (top > 200) {
                scrubber.style.position = 'fixed';
                scrubber.style.top = '60px';
                scrubber.style.left = (get_body_w() - 960) / 2 + 'px';
            } else {
                scrubber.style.position = '';
                scrubber.style.top = '';
                scrubber.style.left = '';
            }
            update_scrubber_year(top);
            update_scrubber_month(top);
        }
        //最后一个是，让页面平滑的移动的小js代码
        //  动画函数
        var fx = function (fn, begin, end) {
            // 渐出特效
            fx.easeOut = function (t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            }
            var options = arguments[3] || {};
            var duration = options.duration || 500;
            var ease = options.ease || fx.easeOut;
            startTime = new Date().getTime();
            (function () {
                setTimeout(function () {
                    timestamp = new Date().getTime() - startTime;
                    fn(ease(timestamp, begin, ( end - begin), duration), 'step');
                    if (duration <= timestamp) {
                        fn(end, 'end');
                    } else {
                        setTimeout(arguments.callee, 25);
                    }
                }, 25)
            })();

        }

时光轴的设计：