动态添加课程效果

window.onload = function() {
    var oWrap = document.getElementById('wrap'),
        oList1 = document.getElementById('list1'),
        oList2 = document.getElementById('list2'),
        aLi = oList1.getElementsByTagName('li'),
        t = null,
        marginLeft = 1, //每个格子的margin值
        paddingLeft = 5, //每个格子的padding值
        column = 7, //多少列
        len = 42, //课程
        liWidth = 100, //每个格子的宽度
        o = {
            day: [
                ' 星期一',
                ' 星期二',
                ' 星期三',
                ' 星期四',
                ' 星期五',
                ' 星期六',
                ' 星期日',
            ],
            content: [
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402', '网络协议分析 <br>周一第5,6节{第1-17周} <br>宋小芹(宋小芹) <br>5-203',
                '计算机网络管理 <br>周一第3,4节{第1-17周}<br> 谢泽奇(谢泽奇) <br> 2-402',
            ]
        },


        otarget = document.getElementById('target');

    oWrap.style.width = column * (liWidth + 2 * (marginLeft + paddingLeft)) + 'px'; //获取整体的宽度

    for (var i = 0; i < len; i++) {
        var oLi = document.createElement('li');
        var oDiv = document.createElement('div');
        var oSpan = document.createElement('span');
        var oP = document.createElement('p');
        if (i < 7) {
            oP.innerHTML = o.day[i];
            oLi.style.height = liWidth / 3 + 'px';
        } else {
            oP.innerHTML = o.content[i - 7];
            oDiv.className = 'inner';
            oSpan.innerHTML = '+';
            oLi.style.height = liWidth + 'px';
        }
        oLi.style.width = liWidth + 'px';
        oDiv.style.lineHeight = liWidth + (2 * paddingLeft) + 'px';
        oDiv.appendChild(oSpan);
        oLi.appendChild(oP);
        oLi.appendChild(oDiv);
        oList1.appendChild(oLi);

    }

    var onOff = true; //开关截流
    var iNow;
    var num = 0;
    var iH = 0; //每个ul2里面每个li的高度
    var day; //星期几


    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;

        aLi[i].onmouseenter = function(e) {
            var oInner = this.getElementsByTagName('div')[0];
            $(oInner).animate({
                opacity: 1
            }, 0, 'easeInStrong');

            oInner.onclick = function() {
                if (onOff) {
                    num++;
                    document.getElementsByTagName('h2')[0].innerHTML = '共选择了' + num + '节课';
                    oLi2 = document.createElement('li');
                    oLi2.style.borderBottom = '1px solid #666';
                    oLi2.style.borderRight = '1px solid #666';
                    oLi2.style.opacity = 0;
                    switch (this.parentNode.index % 7) {
                        case 0:
                            day = '一';
                            break;

                        case 1:
                            day = '二';
                            break;

                        case 2:
                            day = '三';
                            break;

                        case 3:
                            day = '四';
                            break;

                        case 4:
                            day = '五';
                            break;

                        case 5:
                            day = '六';
                            break;

                        case 6:
                            day = '天';
                            break;

                    }

                    var x = this.parentNode.childNodes[0].innerHTML.indexOf(' ');
                    // console.log(x);
                    oLi2.innerHTML = '已选星期' + day + '的------->' + this.parentNode.childNodes[0].innerHTML.substr(0, x + 1) + '<a href="javascript:;">删除</a>';
                    oList2.appendChild(oLi2);
                    var oA = oLi2.getElementsByTagName('a')[0];
                    iH = oLi2.offsetHeight; //先添加到文档，才能获取当前li的高度

                    oA.onclick = function() {
                            num--;
                            if (num != 0) document.getElementsByTagName('h2')[0].innerHTML = '共选择了' + num + '节课';
                            else document.getElementsByTagName('h2')[0].innerHTML = '';

                            // console.log(oInner.parentNode.index);
                            var x = oInner.parentNode.index;
                            console.log(this.parentNode)
                            this.parentNode.style.border = 'none';
                            this.parentNode.innerHTML = '';

                            setTimeout(function() {
                                aLi[x].style.backgroundColor = '#2bb8aa';
                                aLi[x].childNodes[0].innerHTML = o.content[x - 7];
                            }, 700);
                            //console.log( aLi[x].childNodes[0] );
                            //console.log( aLi[x].offsetLeft);
                            aLi[x].style.cursor = "pointer";
                            $(aLi[x].childNodes[1]).animate({
                                // left :  this.offsetLeft + (otarget.offsetLeft - this.parentNode.offsetLeft),
                                left: 0,
                                top: 0,
                                opacity: 1
                            }, 300, 'easeBoth', function() {

                            });

                            aLi[x].childNodes[1].style.WebKitTransform = 'scale(1)';
                            aLi[x].childNodes[1].style.transform = 'scale(1)';
                            aLi[x].childNodes[1].style.borderRadius = '0';
                            setTimeout(function() {
                                    aLi[x].childNodes[1].style.opacity = 0;
                                }, 1000)
                                //console.log(aLi[x].childNodes[0])

                        }
                        // console.log(oLi2.children);



                    $(oLi2).animate({
                        opacity: 1
                    }, 1500, 'linear');

                    iNow = this.index;
                    // console.log(this.parentNode)
                    this.parentNode.style.backgroundColor = "#eee";

                    this.parentNode.style.cursor = "default";
                    this.parentNode.childNodes[0].innerHTML = '已选' + num;
                    this.style.WebKitTransform = 'scale(.1)';
                    this.style.MozTransform = 'scale(.1)';
                    this.style.MsTransform = 'scale(.1)';
                    this.style.OTransform = 'scale(.1)';
                    this.style.transform = 'scale(.1)';
                    this.style.borderRadius = '50%';
                    // console.log(otarget.offsetLeft + ':' + otarget.offsetTop);

                    $(this).animate({
                        left: otarget.offsetLeft - this.parentNode.offsetLeft - 60,
                        top: otarget.offsetTop - this.parentNode.offsetTop + iH * (num - 2) - 5,
                        opacity: 1
                    }, 300, 'easeBoth', function() {
                        this.style.opacity = 0;
                    });
                    onOff = false;
                }


            }
            this.onmouseleave = function() {
                setTimeout(function() {
                    onOff = true;
                }, 100)
                $(oInner).animate({
                    opacity: 0
                }, 0, 'bounceIn');
            };

        }


    }


    document.onmousemove = function() {
        return false;
    }

}

 

$.extend(jQuery.easing,{
    
    easeIn: function(x,t, b, c, d){  //加速曲线
        return c*(t/=d)*t + b;
    },
    easeOut: function(x,t, b, c, d){  //减速曲线
        return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(x,t, b, c, d){  //加速减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t + b;
        }
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(x,t, b, c, d){  //加加速曲线
        return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(x,t, b, c, d){  //减减速曲线
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(x,t, b, c, d){  //加加速减减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t*t*t + b;
        }
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(x,t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
        if (t === 0) { 
            return b; 
        }
        if ( (t /= d) == 1 ) {
            return b+c; 
        }
        if (!p) {
            p=d*0.3; 
        }
        if (!a || a < Math.abs(c)) {
            a = c; 
            var s = p/4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(x,t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
        if (t === 0) {
            return b;
        }
        if ( (t /= d) == 1 ) {
            return b+c;
        }
        if (!p) {
            p=d*0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },    
    elasticBoth: function(x,t, b, c, d, a, p){
        if (t === 0) {
            return b;
        }
        if ( (t /= d/2) == 2 ) {
            return b+c;
        }
        if (!p) {
            p = d*(0.3*1.5);
        }
        if ( !a || a < Math.abs(c) ) {
            a = c; 
            var s = p/4;
        }
        else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        if (t < 1) {
            return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
                    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        }
        return a*Math.pow(2,-10*(t-=1)) * 
                Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    },
    backIn: function(x,t, b, c, d, s){     //回退加速（回退渐入）
        if (typeof s == 'undefined') {
           s = 1.70158;
        }
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backOut: function(x,t, b, c, d, s){
        if (typeof s == 'undefined') {
            s = 3.70158;  //回缩的距离
        }
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }, 
    backBoth: function(x,t, b, c, d, s){
        if (typeof s == 'undefined') {
            s = 1.70158; 
        }
        if ((t /= d/2 ) < 1) {
            return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        }
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    bounceIn: function(x,t, b, c, d){    //弹球减振（弹球渐出）
        return c - this['bounceOut'](x,d-t, 0, c, d) + b;
    },       
    bounceOut: function(x,t, b, c, d){
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
        }
        return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    },      
    bounceBoth: function(x,t, b, c, d){
        if (t < d/2) {
            return this['bounceIn'](x,t*2, 0, c, d) * 0.5 + b;
        }
        return this['bounceOut'](x,t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    }
    
});

<body>
    <div id="wrap">

        <ul id="list1">
            
        </ul>

    </div>

    <div id="target">
        <h3>课程列表</h3>        
        <ul id="list2">
        </ul>
        <h2></h2>
    </div>
</body>

<style>
    body,ul,li,h1,h2,h3,h4,h5,h6,span,div,input{margin: 0;padding: 0;}
    li{list-style: none}
    #wrap{margin: 20px auto;background: #eee;}
    #list1 li{background: #2bb8aa;position: relative;cursor: pointer;padding: 5px;float: left;margin:1px;}
    #list1 p{position: absolute;font:14px/16px '宋体';text-align: center}
    #list1 .inner{width:100%;height: 100%;background: rgba(0,0,0,.4);text-align: center;position:absolute;left:0;top: 0;transition:all .4s;z-index: 2;opacity: 0}
    #list1 .inner span{color:white;font-weight: 600px;font-size: 60px;}

    #target{position: absolute;top: 120px;left:20px;z-index:1;}
    #target ul{border-top: 1px solid #666;border-left: 1px solid #666;}
    #target li{border-bottom: 1px solid #666;border-right: 1px solid #666;}
    #target li a{float: right;}
    @media (max-1500px) { 
        #target{position: absolute;top: 640px;left:calc(50% - 100px) ;z-index:1;}
    }