杂谈-网页设计大赛的一些感想

function twinkle() {
    run = function() {
        context_stars.clearRect(0, 0, canvas_stars.width, canvas_stars.height);//每次清除整个画布
        for (var i = 0; i < starsnum; i++) {
            start[i] ++;
            starArr[i].opacity = Tween.Quart.easeInOut(start[i], flag[i], 1-2*flag[i], 100);//这里用到了一个缓动的库
            drawCirle(context_stars, starArr[i].centerX, starArr[i].centerY, starArr[i].radius, starArr[i].opacity);
            if(start[i] == 100){　　//当start == 100的时候完成两件事情，一个是start置零 另一个是flag方向交换，简单来讲就是从0->1变成1->0或者反之
                start[i] = 0;
                flag[i] = 1-flag[i];
            }
        }
        requestAnimationFrame(run);
    };
    run();
}

var wheel = {
    pre_wheel: 0, //前一个滚轮位置
    cur_wheel: 0, //当前滚轮位置
    wheelup: false, //滚轮是否向上
    wheeldown: false, //滚轮是否向下
    on_top: false, //滚轮是否到顶
    on_bottom: false //滚轮是否到底
}

function scroll() { //滚动的时候判断滚轮的状态
    wheel.cur_wheel = $(window).scrollTop();
    if (wheel.cur_wheel < wheel.pre_wheel) {
        wheel.wheelup = true;
        wheel.wheeldown = false;
    } else if (wheel.cur_wheel > wheel.pre_wheel) {
        wheel.wheelup = false;
        wheel.wheeldown = true;
    } else if(wheel.cur_wheel == wheel.pre_wheel) {
        wheel.wheelup = wheel.wheeldown = false;
    }
    if ($(window).scrollTop() == 0) {
        wheel.on_top = true;
    } else {
        wheel.on_top = false;
    }
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        wheel.on_bottom = true;
    } else {
        wheel.on_bottom = false;
    }
    /*鼠标滚动函数接口*/
    /*此处可以放入一些需要滚轮监控的事件*/

    wheel.pre_wheel = wheel.cur_wheel;
}

var block_top = false;
var block_jump = false;

function to_top() { //跳转回顶部
    if(block_top == false)
    {
        x = document.body.scrollTop;
        rocket = document.getElementById(‘rocket‘);
        if (x == 0) {
            return;
        }
        block_jump = true;
        block_top = true;
        start = 0, during = Math.floor(40 * x / document.documentElement.clientHeight);
        tween_to_top = function() {
            start++;
            document.body.scrollTop = Tween.Quart.easeInOut(start, x, -x, during);
            if (start < during)
                requestAnimationFrame(tween_to_top);
            if (start == during) {
                rocket.style.cssText = "display: none";
                block_jump = false;
                block_top = false;
            }
        };
        tween_to_top();
    }
}

function jump(obj) {
    if(block_jump == false){
        object = document.getElementById(obj);
        x = document.body.scrollTop;
        to = object.offsetTop;
        if(Math.abs(x - to) < 1)
            return;
        start = 0, during = Math.floor(40 * Math.abs(to - x) / document.documentElement.clientHeight);
        block_top = true;
        block_jump = true;
        cur_page = getindex(pages, obj);
        jump_to = function() {
            start++;
            document.body.scrollTop = Tween.Quart.easeInOut(start, x, to - x, during);
            if (start <= during) {
                requestAnimationFrame(jump_to);
            }else{
                block_top = false;
                block_jump = false;
            }
        };
        jump_to();
    }
}

$(function(){
    let num = Events.length;
    for(var i = 0; i < num; i++){
        $(‘.time‘).append("<td class=‘time_text‘>" + Events[i].date + "</td>");
        $(‘.timepoint‘).append("<td class=‘time_point‘><img src=‘img/circle.svg‘></td>");
    }
    $(‘.time‘).append("<td class=‘time_text‘>接下来会发生什么呢...</td>");
    $(‘.timepoint‘).append("<td class=‘time_point‘><img src=‘img/circle_cur.svg‘></td>");
    $(‘.time_line_notice‘).html("<div class=‘time_line_img‘></div>"+
                                "<div class=‘time_line_intro‘></div>"+ 
                                "<h3  style = ‘text-align:center;‘>" + "通告" + "</h3>"+
                                "<p style = ‘font-weight: normal;‘>" + notice + "</p>");
    $(‘.time_line_intro‘).css("display", "none");
    $(‘.time_line_img‘).css("display", "none");
    $(‘.time_point img‘).click(function(){
        var i = $(‘.time_point img‘).index(this);
        $(‘.time_point img‘).attr("src", "img/circle.svg");
        $(‘.time_point img‘).eq(i).attr("src", "img/circle_cur.svg");
        if (i == num) {
            $(‘.time_line_intro‘).css("display", "none");
            $(‘.time_line_center‘).text(‘未来计划‘);
            $(‘.time_line_img‘).removeAttr("style");
            $(‘.time_line_notice‘).html("<div class=‘time_line_img‘></div>"+
                                "<div class=‘time_line_intro‘></div>"+ 
                                "<h3 style = ‘text-align:center;‘>" + "通告" + "</h3>"+
                                "<p style = ‘font-weight: normal;‘>" + notice + "</p>");
            $(‘.time_line_intro‘).css("display", "none");
            $(‘.time_line_img‘).css("display", "none");
        }else{
            $(‘.time_line_intro‘).css("display", "block");
            $(‘.time_line_img‘).css("display", "block");
            $(‘.time_line_center‘).text(‘过往记忆‘);
            $(‘.time_line_intro‘).html("<b>" + Events[i].title + "</b>" + "<p>" + Events[i].date +" "+ Events[i].place + "</p>" + "<p>" + Events[i].context + "</p>");
            $(‘.time_line_img‘).css("background-image", "url(" + Events[i].pic +")");
        }
    });
});