动态添加课程效果

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-width:1500px) {
        #target{position: absolute;top: 640px;left:calc(50% - 100px) ;z-index:1;}
    }

时间： 2024-10-13 22:21:11

动态添加课程效果的相关文章

通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

WPF实现选项卡效果（2）——动态添加AvalonDock选项卡

简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml代码实现. 现在我们尝试通过C#代码实现选项卡的动态添加. 修改Xaml代码 在前面一篇文章的Xaml代码里面,添加如下代码: <Grid.RowDefinitions> <RowDefinition Height="25"></RowDefinition> <RowDefinition></RowDefi

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

在流布局里面动态添加自定义控件，通过简单的按钮分页技术

由于最近没什么事情,一直在看java基础,前几天接到上级的任务,得作出一个门禁系统的cs界面出来,能够实现分页,数据绑定需求如下图 看到这里,因为我基本没接触过cs的东西,一时间只有两三个思路,第一个思路是:自定义控件+panle控件(最终感觉行不通没有去做) 第二个思路是:自定义控件+DataGridView控件,尝试了几天,感觉方法有点繁琐,而且不一定能实现这种效果: 第三个思路是:自定义控件+流布局+自动生成.最终我通过第三种方法做出来了: 第四个思路是:wcf 只是有这个思路,还没有去实

Android开发之动态添加控件

动态添加TextView控件: 一:创建一个Android project项目 activity_main.xml文件: 1.用两个LinearLayout布局分别包裹一对TextView,EditText控件,将orientation设置为水平方向,EditText的hint属性可以实现水印效果,两个EditText用来控制显示(TextView控件数量)的行和列. 2. 用一个LinearLayout布局包裹Button按钮,在EditText控件输入完后,点击button按钮,就会自动生成

miniUI 动态添加table - JS

1.效果展示 ↓ 2.具体代码 1 <script type="text/javascript"> 2 function addRow() { 3 var form = document.getElementById("addForm"); 4 var table = document.getElementById("table_Records"); 5 var id_com = form.getElementsByTagName(&

Ext如何动态添加一行组件

用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等. 如: 效果: 实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q

Android使用addView动态添加组件

在项目开发中,我们经常需要进行动态添加组件,其中可添加的部分有两项:布局和组件 其中,添加的布局主要有RelativeLayout型(相对布局)的和LinearLayout(线性布局) 添加的组件主要有文本显示框,编辑框,按钮等组件. 下面,就让我们来进行实现: 首先我们创建一个新的项目,删除MainActivity.class中没有的代码,仅留下protected void onCreate(Bundle savedInstanceState)函数 往布局文件中添加一个新的组件: 1. add