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;} }
![image image](https://images2015.cnblogs.com/blog/695843/201511/695843-20151114173022697-111568488.png)