├── README.md ├── Algorithm.cpp ├── image ├── 0.png ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 24.jpg ├── 25.jpg ├── 26.jpg ├── 27.jpg ├── 28.jpg ├── 29.jpg ├── 3.jpg ├── 30.jpg ├── 31.jpg ├── 32.jpg ├── 33.jpg ├── 34.jpg ├── 35.jpg ├── 36.jpg ├── 37.jpg ├── 38.jpg ├── 39.jpg ├── 4.jpg ├── 40.jpg ├── 41.jpg ├── 42.jpg ├── 43.jpg ├── 44.jpg ├── 45.jpg ├── 46.jpg ├── 47.jpg ├── 48.jpg ├── 49.jpg ├── 5.jpg ├── 50.jpg ├── 51.jpg ├── 52.jpg ├── 53.jpg ├── 54.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── 10-no.jpg ├── 14-1.jpg ├── 24-1.jpg ├── 24-2.jpg ├── 25-1.jpg ├── bg-1.psd ├── leida1.jpg ├── leida2-1.jpg ├── leida2.jpg ├── leida2.png ├── leida3.jpg ├── logo1_3.png ├── 图片编号对应名字.txt └── logo1_3 - 副本.png ├── font └── monaco.ttf ├── script ├── zain-window-user.js ├── index.js └── zain-window-basic.js ├── style ├── zain-window-basic.css ├── zain-window-user.css └── index.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # LeidaMovie 2 | LeidaMovie 3 | # Zain Chen 4 | -------------------------------------------------------------------------------- /Algorithm.cpp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/Algorithm.cpp -------------------------------------------------------------------------------- /image/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/0.png -------------------------------------------------------------------------------- /image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/1.jpg -------------------------------------------------------------------------------- /image/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/10.jpg -------------------------------------------------------------------------------- /image/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/11.jpg -------------------------------------------------------------------------------- /image/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/12.jpg -------------------------------------------------------------------------------- /image/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/13.jpg -------------------------------------------------------------------------------- /image/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/14.jpg -------------------------------------------------------------------------------- /image/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/15.jpg -------------------------------------------------------------------------------- /image/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/16.jpg -------------------------------------------------------------------------------- /image/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/17.jpg -------------------------------------------------------------------------------- /image/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/18.jpg -------------------------------------------------------------------------------- /image/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/19.jpg -------------------------------------------------------------------------------- /image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/2.jpg -------------------------------------------------------------------------------- /image/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/20.jpg -------------------------------------------------------------------------------- /image/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/21.jpg -------------------------------------------------------------------------------- /image/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/22.jpg -------------------------------------------------------------------------------- /image/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/23.jpg -------------------------------------------------------------------------------- /image/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/24.jpg -------------------------------------------------------------------------------- /image/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/25.jpg -------------------------------------------------------------------------------- /image/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/26.jpg -------------------------------------------------------------------------------- /image/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/27.jpg -------------------------------------------------------------------------------- /image/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/28.jpg -------------------------------------------------------------------------------- /image/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/29.jpg -------------------------------------------------------------------------------- /image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/3.jpg -------------------------------------------------------------------------------- /image/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/30.jpg -------------------------------------------------------------------------------- /image/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/31.jpg -------------------------------------------------------------------------------- /image/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/32.jpg -------------------------------------------------------------------------------- /image/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/33.jpg -------------------------------------------------------------------------------- /image/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/34.jpg -------------------------------------------------------------------------------- /image/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/35.jpg -------------------------------------------------------------------------------- /image/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/36.jpg -------------------------------------------------------------------------------- /image/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/37.jpg -------------------------------------------------------------------------------- /image/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/38.jpg -------------------------------------------------------------------------------- /image/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/39.jpg -------------------------------------------------------------------------------- /image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/4.jpg -------------------------------------------------------------------------------- /image/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/40.jpg -------------------------------------------------------------------------------- /image/41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/41.jpg -------------------------------------------------------------------------------- /image/42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/42.jpg -------------------------------------------------------------------------------- /image/43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/43.jpg -------------------------------------------------------------------------------- /image/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/44.jpg -------------------------------------------------------------------------------- /image/45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/45.jpg -------------------------------------------------------------------------------- /image/46.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/46.jpg -------------------------------------------------------------------------------- /image/47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/47.jpg -------------------------------------------------------------------------------- /image/48.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/48.jpg -------------------------------------------------------------------------------- /image/49.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/49.jpg -------------------------------------------------------------------------------- /image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/5.jpg -------------------------------------------------------------------------------- /image/50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/50.jpg -------------------------------------------------------------------------------- /image/51.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/51.jpg -------------------------------------------------------------------------------- /image/52.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/52.jpg -------------------------------------------------------------------------------- /image/53.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/53.jpg -------------------------------------------------------------------------------- /image/54.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/54.jpg -------------------------------------------------------------------------------- /image/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/6.jpg -------------------------------------------------------------------------------- /image/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/7.jpg -------------------------------------------------------------------------------- /image/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/8.jpg -------------------------------------------------------------------------------- /image/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/9.jpg -------------------------------------------------------------------------------- /font/monaco.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/font/monaco.ttf -------------------------------------------------------------------------------- /image/10-no.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/10-no.jpg -------------------------------------------------------------------------------- /image/14-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/14-1.jpg -------------------------------------------------------------------------------- /image/24-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/24-1.jpg -------------------------------------------------------------------------------- /image/24-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/24-2.jpg -------------------------------------------------------------------------------- /image/25-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/25-1.jpg -------------------------------------------------------------------------------- /image/bg-1.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/bg-1.psd -------------------------------------------------------------------------------- /image/leida1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/leida1.jpg -------------------------------------------------------------------------------- /image/leida2-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/leida2-1.jpg -------------------------------------------------------------------------------- /image/leida2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/leida2.jpg -------------------------------------------------------------------------------- /image/leida2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/leida2.png -------------------------------------------------------------------------------- /image/leida3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/leida3.jpg -------------------------------------------------------------------------------- /image/logo1_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/logo1_3.png -------------------------------------------------------------------------------- /image/图片编号对应名字.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/图片编号对应名字.txt -------------------------------------------------------------------------------- /image/logo1_3 - 副本.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZainChen/LeidaMovie/master/image/logo1_3 - 副本.png -------------------------------------------------------------------------------- /script/zain-window-user.js: -------------------------------------------------------------------------------- 1 | var windowZain = new ZainWindow("zain"); //构造窗口对象 2 | windowZain.setWidth("90px"); //设置窗口相关属性 3 | windowZain.setHeight("150px"); 4 | windowZain.setMaxWidth("200px"); 5 | windowZain.setMaxHeight("150px"); 6 | windowZain.setMinWidth("90px"); 7 | windowZain.setMinHeight("150px"); 8 | windowZain.setTitleHeight("30px"); 9 | windowZain.setBorderWidth("5px"); 10 | windowZain.setLeft("600px"); 11 | windowZain.setTop("450px"); 12 | windowZain.showWindowInfo(); 13 | -------------------------------------------------------------------------------- /style/zain-window-basic.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | /*禁止页面选择文字*/ 5 | -moz-user-select: none; /*火狐*/ 6 | -webkit-user-select: none; /*webkit浏览器*/ 7 | -ms-user-select: none; /*IE10*/ 8 | -khtml-user-select: none; /*早期浏览器*/ 9 | user-select: none; 10 | } 11 | html,body { 12 | /*overflow: hidden;*/ 13 | width: 100%; 14 | height: 100%; 15 | /*background: #eee;*/ 16 | } 17 | zain-window,#zain-window { 18 | overflow: hidden; 19 | display: block; 20 | position: absolute; 21 | z-index: 1; 22 | box-shadow: 0 0 15px #555; 23 | } 24 | zain-window-title,#zain-window-title { 25 | display: block; 26 | position: absolute; 27 | z-index: 200; 28 | background: rgba(0,0,0,0.6); 29 | /*cursor: crosshair;*/ 30 | } 31 | zain-window-content,#zain-window-content { 32 | display: block; 33 | position: absolute; 34 | z-index: 1; 35 | background: rgba(200,200,200,0.5); 36 | } 37 | zain-window-left-top,#zain-window-left-top { 38 | display: block; 39 | position: absolute; 40 | z-index: 200; 41 | background: rgba(50,50,50,0.9); 42 | cursor: nw-resize; 43 | } 44 | zain-window-top,#zain-window-top { 45 | display: block; 46 | position: absolute; 47 | z-index: 200; 48 | background: rgba(50,50,50,0.5); 49 | cursor: n-resize; 50 | } 51 | zain-window-right-top,#zain-window-right-top { 52 | display: block; 53 | position: absolute; 54 | z-index: 200; 55 | background: rgba(50,50,50,0.9); 56 | cursor: ne-resize; 57 | } 58 | zain-window-left,#zain-window-left { 59 | display: block; 60 | position: absolute; 61 | z-index: 200; 62 | background: rgba(50,50,50,0.5); 63 | cursor: w-resize; 64 | } 65 | zain-window-right,#zain-window-right { 66 | display: block; 67 | position: absolute; 68 | z-index: 200; 69 | background: rgba(50,50,50,0.5); 70 | cursor: e-resize; 71 | } 72 | zain-window-left-bottom,#zain-window-left-bottom { 73 | display: block; 74 | position: absolute; 75 | z-index: 200; 76 | background: rgba(50,50,50,0.9); 77 | cursor: sw-resize; 78 | } 79 | zain-window-bottom,#zain-window-bottom { 80 | display: block; 81 | position: absolute; 82 | z-index: 200; 83 | background: rgba(50,50,50,0.5); 84 | cursor: s-resize; 85 | } 86 | zain-window-right-bottom,#zain-window-right-bottom { 87 | display: block; 88 | position: absolute; 89 | z-index: 200; 90 | background: rgba(50,50,50,0.9); 91 | cursor: se-resize; 92 | } -------------------------------------------------------------------------------- /style/zain-window-user.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | /*禁止页面选择文字*/ 5 | -moz-user-select: none; /*火狐*/ 6 | -webkit-user-select: none; /*webkit浏览器*/ 7 | -ms-user-select: none; /*IE10*/ 8 | -khtml-user-select: none; /*早期浏览器*/ 9 | user-select: none; 10 | } 11 | html,body { 12 | /*overflow: hidden;*/ 13 | width: 100%; 14 | height: 100%; 15 | /*background: #eee;*/ 16 | } 17 | zain-window,#zain-window { 18 | overflow: hidden; 19 | display: block; 20 | position: absolute; 21 | z-index: 500; 22 | box-shadow: 0 0 15px #555; 23 | transition: 1s; 24 | } 25 | zain-window-title,#zain-window-title { 26 | display: block; 27 | position: absolute; 28 | z-index: 200; 29 | background: rgba(0,0,0,0.6); 30 | /*cursor: crosshair;*/ 31 | } 32 | zain-window-content,#zain-window-content { 33 | display: block; 34 | position: absolute; 35 | z-index: 1; 36 | background: rgba(200,200,200,0.5); 37 | } 38 | zain-window-left-top,#zain-window-left-top { 39 | display: block; 40 | position: absolute; 41 | z-index: 200; 42 | background: rgba(50,50,50,0); 43 | cursor: nw-resize; 44 | } 45 | zain-window-top,#zain-window-top { 46 | display: block; 47 | position: absolute; 48 | z-index: 200; 49 | background: rgba(50,50,50,0); 50 | cursor: n-resize; 51 | } 52 | zain-window-right-top,#zain-window-right-top { 53 | display: block; 54 | position: absolute; 55 | z-index: 200; 56 | background: rgba(50,50,50,0); 57 | cursor: ne-resize; 58 | } 59 | zain-window-left,#zain-window-left { 60 | display: block; 61 | position: absolute; 62 | z-index: 200; 63 | background: rgba(50,50,50,0); 64 | cursor: w-resize; 65 | } 66 | zain-window-right,#zain-window-right { 67 | display: block; 68 | position: absolute; 69 | z-index: 200; 70 | background: rgba(50,50,50,0); 71 | cursor: e-resize; 72 | } 73 | zain-window-left-bottom,#zain-window-left-bottom { 74 | display: block; 75 | position: absolute; 76 | z-index: 200; 77 | background: rgba(50,50,50,0); 78 | cursor: sw-resize; 79 | } 80 | zain-window-bottom,#zain-window-bottom { 81 | display: block; 82 | position: absolute; 83 | z-index: 200; 84 | background: rgba(50,50,50,0); 85 | cursor: s-resize; 86 | } 87 | zain-window-right-bottom,#zain-window-right-bottom { 88 | display: block; 89 | position: absolute; 90 | z-index: 200; 91 | background: rgba(50,50,50,0); 92 | cursor: se-resize; 93 | } -------------------------------------------------------------------------------- /script/index.js: -------------------------------------------------------------------------------- 1 | var personNumber = 0; //准备随机分配的人数 2 | var personName = new Array("", 3 | "曾文豪", "廖元武", "吴小伟", "熊敏", "罗剑", "付建平", "罗智强", "彭昌文", "王福东", 4 | "邓琼", "谢晔玲", "曾小斌", "段聪", "康宇晨", "孔佳承", "欧阳煜", "朱佳", "陈志银", 5 | "戴新亮", "周吉海", "欧著源", "朱婷", "杨成龙", "鄢艳玲", "郭莉华", 6 | "熊志勇", "朱模健", 7 | "张君", "徐海洋", "何银坤", "邹逸凡", "吴志锋", "樊泽亮", "凌杰", "欧阳皓明", "陈涛", 8 | "李川娇", "褚后屹", "--39", "--40--", "--41--", "--42--", "--43--", "--44--", "--45--", 9 | "--46--", "--47--", "--48--", "--49--", "--50--", "--51--", "--52--", "--53--", "--54--" 10 | ); 11 | // var pn = new Array(); 12 | 13 | function Execute() { //在文档加载完成后才能够去执行,可以避免获取不到对象的情况,同时可以避免定义全局变量和函数 14 | selectSeat(); //挑选座位和人员(只有选中了的座位才给排序) 15 | startButton(); //开始分配座位按钮 16 | shiftButton(); //背景与位置选择框切换功能 17 | moveLi(); //鼠标经过li效果 18 | allSelect(); //座位全选函数 19 | } 20 | 21 | function selectSeat() { //挑选座位和人员(只有选中了的座位才给排序) 22 | for(var i = 1; i <= 54; i++) { 23 | var li = document.getElementById("li"+i); 24 | ~(function(i) { 25 | li.onclick = function() { 26 | var thisDiv = this.getElementsByTagName("div")[0]; 27 | var shb = document.getElementById("shift-button"); 28 | if(thisDiv.id == "li-person" && shb.innerText != "show") { //当前位置没人时可单击添加一个人 29 | personNumber++; 30 | thisDiv.id = "li-person"+personNumber; 31 | this.style.background = "rgba(0,0,0,0.2)"; 32 | } else if(thisDiv.id != "li-person-leida1" && thisDiv.id != "li-person-leida2" && thisDiv.id != "li-person-leida3" && shb.innerText != "show") { 33 | var k = 0, l = thisDiv.id.length; 34 | if(l == 10) { //求当前减少的人所在div的id编号 35 | k = parseInt(thisDiv.id[l-1]); 36 | } else { 37 | k = parseInt(thisDiv.id[l-2])*10+parseInt(thisDiv.id[l-1]); 38 | } 39 | for(var j = k+1; j <= personNumber; j++) { //减少一个人需要重新分配位置id 40 | document.getElementById("li-person"+j).id = "li-person"+(j-1); 41 | } 42 | var k1 = 0, l1 = this.id.length; 43 | if(l1 == 3) { //求当前减少的人所在div的id编号 44 | k1 = parseInt(this.id[l1-1]); 45 | } else { 46 | k1 = parseInt(this.id[l1-2])*10+parseInt(this.id[l1-1]); 47 | } 48 | // seatAnimationDetail(k1, "out"); //div移出座位详细控制动画 49 | personNumber--; 50 | thisDiv.id = "li-person"; 51 | this.style.background = "rgba(0,0,0,0)"; 52 | document.getElementsByTagName("p")[k1-1].innerText = ""; //减少单击到的人是立马消失名字和图片 53 | document.getElementsByTagName("img")[k1-1].src = "./image/0.png"; 54 | } 55 | document.getElementById("hide-yn").innerHTML = "Num:"+personNumber; //显示已选位置数量 56 | } 57 | })(i); 58 | } 59 | } 60 | 61 | function allSelect() { //座位全选函数 62 | var li = document.getElementsByTagName("li"); 63 | var shb = document.getElementById("shift-button"); 64 | var alc = document.getElementById("all-choice"); 65 | alc.onclick = function() { 66 | if(shb.innerText != "show") { 67 | for(var i = 0; i < li.length; i++) { 68 | var thisDiv = li[i].getElementsByTagName("div")[0]; 69 | if(thisDiv.id == "li-person") { //当前位置没人时可单击添加一个人 70 | personNumber++; 71 | thisDiv.id = "li-person"+personNumber; 72 | li[i].style.background = "rgba(0,0,0,0.2)"; 73 | } 74 | } 75 | document.getElementById("hide-yn").innerHTML = "Num:"+personNumber; //显示已选位置数量 76 | } 77 | } 78 | } 79 | 80 | function startButton() { //开始分配座位按钮 81 | var start = document.getElementById("start"); 82 | var shb = document.getElementById("shift-button"); 83 | start.onclick = function() { 84 | if(shb.innerText == "seat") { 85 | randomSeat(); //随机分配座位功能实现 86 | setTimeout(function() {seatAnimationIn(1);}, 2000); //div移入座位控制总动画 87 | } 88 | } 89 | } 90 | 91 | function imgInitialize() { //初始化图片(将所有图片变为0.png) 92 | var img = document.getElementsByTagName("img"); 93 | for(var i = 0; i < img.length; i++) { 94 | if(i == 12) { 95 | img[i].src = "./image/leida1.jpg"; 96 | } else if(i == 13) { 97 | img[i].src = "./image/leida2.jpg"; 98 | } else { 99 | img[i].src = "./image/0.png"; 100 | } 101 | } 102 | } 103 | 104 | function randomSeat() { //随机分配座位功能实现 105 | imgInitialize(); //初始化图片(将所有图片变为0.png) 106 | document.getElementById("li-img-leida1").src = "./image/leida1.jpg"; 107 | document.getElementById("li-name14").innerText = "雷老师"; 108 | document.getElementById("li-img-leida2").src = "./image/leida2.jpg"; 109 | document.getElementById("li-name15").innerText = "师母"; 110 | document.getElementById("li-img-leida3").src = "./image/leida3.jpg"; 111 | document.getElementById("li-name49").innerText = "曾前"; 112 | var lple1 = document.getElementById("li-person-leida1"); 113 | setTimeout(function() {lple1.style.left = "0px"; lple1.style.top = "0px";}, 500); 114 | var lple2 = document.getElementById("li-person-leida2"); 115 | setTimeout(function() {lple2.style.left = "0px"; lple2.style.top = "0px";}, 1000); 116 | var lple3 = document.getElementById("li-person-leida3"); 117 | setTimeout(function() {lple3.style.left = "0px"; lple3.style.top = "0px";}, 1500); 118 | var k, a = new Array(), t; 119 | for(var i = 0; i < personNumber; i++) { 120 | a[i] = i; 121 | } 122 | for(var i = 0; i < personNumber-1; i++) { 123 | k = Math.floor(Math.random()*(personNumber-i)); //0~(44-i)的随机数 124 | t = a[k]; 125 | a[k] = a[personNumber-1-i]; 126 | a[personNumber-1-i] = t; 127 | } 128 | for(var i = 0; i < personNumber; i++) { // console.log(a[i]); 129 | var lp = document.getElementById("li-person"+(i+1)); 130 | lp.innerHTML = "

"+personName[a[i]+1]+"

"; 131 | } 132 | } 133 | 134 | function seatAnimationDetail(n, io) { //div移入或移出座位详细控制动画,n为第几个div,io控制进入位置或出去动画 135 | if(n <= personNumber) { 136 | var lp = document.getElementById("li-person"+n); 137 | if(io == "in") { //进入位置动画 138 | lp.style.left = "0px"; 139 | lp.style.top = "0px"; 140 | } else { 141 | if(n == 1) { 142 | lp.style.left = "-100px"; 143 | lp.style.top = "0px"; 144 | } else if(n == 2) { 145 | lp.style.left = "-206px"; 146 | lp.style.top = "10px"; 147 | } 148 | } 149 | } 150 | } 151 | 152 | function seatAnimationIn(n) { //div移入座位控制总动画,n要为1 153 | var i = n; 154 | seatAnimationDetail(i, "in"); 155 | setTimeout(function() { 156 | if(i < personNumber) { 157 | i++; 158 | seatAnimationIn(i); 159 | } 160 | }, 500); 161 | } 162 | 163 | function shiftButton() { //背景与位置选择框切换功能 164 | var shb = document.getElementById("shift-button"); 165 | var seb = document.getElementById("seat-border"); 166 | var span = document.getElementsByTagName("span"); 167 | var li = document.getElementsByTagName("li"); 168 | shb.onclick = function() { 169 | if(shb.innerText == "show") { 170 | seb.style.backgroundPosition = "0px -500px"; 171 | shb.innerText = "seat"; 172 | // shb.style.bottom = "-45px"; 173 | windowZain.setLeft("5px"); 174 | windowZain.setTop("10px"); 175 | for(var i = 0; i < span.length; i++) { 176 | span[i].style.display = "inline-block"; 177 | } 178 | for(var i = 0; i < li.length; i++) { 179 | if(li[i].getElementsByTagName("div")[0].style.left == "0px") { 180 | li[i].getElementsByTagName("div")[0].style.display = "inline-block"; 181 | // li[i].style.background = "rgba(0,0,0,0.1)"; 182 | } 183 | } 184 | } else { 185 | seb.style.backgroundPosition = "0px 0px"; 186 | shb.innerText = "show"; 187 | // shb.style.bottom = "100px"; 188 | windowZain.setLeft("590px"); 189 | windowZain.setTop("450px"); 190 | for(var i = 0; i < span.length; i++) { 191 | span[i].style.display = "none"; 192 | } 193 | for(var i = 0; i < li.length; i++) { 194 | var lid = li[i].getElementsByTagName("div")[0]; 195 | if(lid.style.left == "0px") { 196 | lid.style.display = "none"; 197 | li[i].style.background = "rgba(0,0,0,0)"; 198 | } 199 | } 200 | } 201 | } 202 | } 203 | 204 | function moveLi() { //鼠标经过li效果 205 | var shb = document.getElementById("shift-button"); 206 | var li = document.getElementsByTagName("li"); 207 | var i; 208 | for(var i = 0; i < li.length; i++) { 209 | ~(function() { 210 | li[i].onmouseover = function() { 211 | if(shb.innerText == "seat" && this.id != "li14" && this.id != "li15" && this.id != "li49") { 212 | if(this.style.background == "rgba(0, 0, 0, 0)" || this.style.background == "") { 213 | this.style.background = "rgba(0,0,0,0.3)"; 214 | this.style.cursor = "pointer"; 215 | } 216 | } 217 | } 218 | li[i].onmouseout = function() { 219 | if(shb.innerText == "seat" && this.id != "li14" && this.id != "li15" && this.id != "li49") { 220 | // alert(this.style.background); 221 | if(this.style.background == "rgba(0, 0, 0, 0.298039)" || this.style.background == "rgba(0, 0, 0, 0.3)") { 222 | this.style.background = "rgba(0,0,0,0)"; 223 | } 224 | } 225 | } 226 | })(); 227 | } 228 | } 229 | 230 | window.onload = Execute //在文档加载完成后才能够去执行,可以避免获取不到对象的情况,同时可以避免定义全局变量和函数 -------------------------------------------------------------------------------- /style/index.css: -------------------------------------------------------------------------------- 1 | @font-face { /*引用外部字体*/ 2 | font-family: monaco; /*这里是说明调用来的字体名字*/ 3 | src: url('../font/monaco.ttf'); /*这里是字体文件路径*/ 4 | } 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | font-family: "Microsoft YaHei", "monaco"; 9 | /*background: pink;*/ 10 | } 11 | .start { 12 | position: absolute; 13 | z-index: 100; 14 | top: 80px; 15 | width: 100%; 16 | height: 40px; 17 | font-size: 25px; 18 | line-height: 40px; 19 | text-align: center; 20 | color: #fff; 21 | background: rgba(0,0,0,0.3); 22 | } 23 | .start:hover { 24 | cursor: pointer; 25 | color: #eee; 26 | background: rgba(0,0,0,0.2); 27 | } 28 | .select-person { 29 | position: absolute; 30 | z-index: 100; 31 | bottom: 0px; 32 | width: 50px; 33 | height: 50%; 34 | background: rgba(0,0,0,0.2); 35 | } 36 | .select-person:hover { 37 | cursor: pointer; 38 | background: rgba(0,0,0,0.5); 39 | } 40 | .hide-yn { 41 | position: absolute; 42 | z-index: 100; 43 | width: 100%; 44 | height: 100%; 45 | font-size: 20px; 46 | text-align: center; 47 | color: #fff; 48 | } 49 | .hide-yn:hover { 50 | color: #eee; 51 | background: rgba(0,0,0,0.7); 52 | } 53 | .seat-border { 54 | position: relative; 55 | width: 1150px; 56 | height: 600px; 57 | margin: auto; 58 | background: url(../image/logo1_3.png); 59 | background-repeat: no-repeat; 60 | background-position: 0px 0px; 61 | transition: 2s; 62 | -moz-transition: 2s; /* Firefox 4 */ 63 | -webkit-transition: 2s; /* Safari 和 Chrome */ 64 | -o-transition: 2s; /* Opera */ 65 | } 66 | .shift-button,.all-choice { 67 | position: absolute; 68 | width: 100%; 69 | height: 40px; 70 | line-height: 40px; 71 | text-align: center; 72 | font-size: 25px; 73 | color: #fff; 74 | background: rgba(0,0,0,0.7); 75 | transition: 0.5s; 76 | -moz-transition: 0.5s; /* Firefox 4 */ 77 | -webkit-transition: 0.5s; /* Safari 和 Chrome */ 78 | -o-transition: 0.5s; /* Opera */ 79 | } 80 | .shift-button:hover { 81 | cursor: pointer; 82 | background: #555; 83 | } 84 | .all-choice { 85 | top: 40px; 86 | font-size: 18px; 87 | line-height: 40px; 88 | background: rgba(0,0,0,0.5); 89 | } 90 | .all-choice:hover { 91 | cursor: pointer; 92 | background: #555; 93 | } 94 | .seat { 95 | list-style: none; 96 | width: 955px; 97 | height: 500px; 98 | margin: auto; 99 | /*background: rgba(255,255,255,1);*/ 100 | } 101 | .seat li { 102 | position: relative; 103 | float: left; 104 | width: 90px; 105 | height: 115px; 106 | margin-top: 5px; 107 | margin-right: 8px; 108 | margin-left: 8px; 109 | -moz-border-radius: 10px; /* Gecko browsers */ 110 | -webkit-border-radius: 10px; /* Webkit browsers */ 111 | border-radius: 10px; /* W3C syntax */ 112 | /*background: rgba(0,0,0,0.2);*/ 113 | } 114 | .seat li:hover { 115 | cursor: pointer; 116 | /*background: rgba(0,0,0,0.3);*/ 117 | } 118 | .seat #li14,.seat #li15 { 119 | background: rgba(240,154,154,0); 120 | } 121 | .seat #li14:hover,.seat #li15:hover { 122 | cursor: default; 123 | } 124 | .seat li div,.seat li h1 { 125 | overflow: hidden; 126 | position: absolute; 127 | width: 100%; 128 | height: 100%; 129 | background: rgba(0,255,255,0.1); 130 | -moz-border-radius: 10px; /* Gecko browsers */ 131 | -webkit-border-radius: 10px; /* Webkit browsers */ 132 | border-radius: 10px; /* W3C syntax */ 133 | transition: 0.5s; 134 | -moz-transition: 0.5s; /* Firefox 4 */ 135 | -webkit-transition: 0.5s; /* Safari 和 Chrome */ 136 | -o-transition: 0.5s; /* Opera */ 137 | } 138 | .li-person1 { 139 | z-index: 1; 140 | left: -100px; 141 | } 142 | .li-person2 { 143 | z-index: 2; 144 | left: -206px; 145 | top: 10px; 146 | } 147 | .li-person3 { 148 | z-index: 3; 149 | left: -312px; 150 | top: 20px; 151 | } 152 | .li-person4 { 153 | z-index: 4; 154 | left: -418px; 155 | top: 30px; 156 | } 157 | .li-person5 { 158 | z-index: 5; 159 | left: -524px; 160 | top: 40px; 161 | } 162 | .li-person6 { 163 | z-index: 9; 164 | left: 418px; 165 | top: 0px; 166 | } 167 | .li-person7 { 168 | z-index: 8; 169 | left: 312px; 170 | top: 10px; 171 | } 172 | .li-person8 { 173 | z-index: 7; 174 | left: 206px; 175 | top: 20px; 176 | } 177 | .li-person9 { 178 | z-index: 6; 179 | left: 100px; 180 | top: 30px; 181 | } 182 | .li-person10 { 183 | z-index: 10; 184 | left: -100px; 185 | top: 0px; 186 | } 187 | .li-person11 { 188 | z-index: 11; 189 | left: -206px; 190 | top: 10px; 191 | } 192 | .li-person12 { 193 | z-index: 12; 194 | left: -312px; 195 | top: 20px; 196 | } 197 | .li-person13 { 198 | z-index: 13; 199 | left: -418px; 200 | top: 20px; 201 | } 202 | .li-person14 { 203 | z-index: 18; 204 | left: 524px; 205 | top: 0px; 206 | transition: 0.5s; 207 | } 208 | .li-person15 { 209 | z-index: 17; 210 | left: 418px; 211 | top: 10px; 212 | transition: 0.5s; 213 | } 214 | .li-person16 { 215 | z-index: 16; 216 | left: 312px; 217 | top: 20px; 218 | transition: 0.5s; 219 | } 220 | .li-person17 { 221 | z-index: 15; 222 | left: 206px; 223 | top: 30px; 224 | transition: 0.5s; 225 | } 226 | .li-person18 { 227 | z-index: 14; 228 | left: 100px; 229 | top: 40px; 230 | transition: 0.5s; 231 | } 232 | .li-person19 { 233 | z-index: 19; 234 | left: -100px; 235 | top: 0px; 236 | transition: 0.5s; 237 | } 238 | .li-person20 { 239 | z-index: 20; 240 | left: -206px; 241 | top: 10px; 242 | transition: 0.5s; 243 | } 244 | .li-person21 { 245 | z-index: 21; 246 | left: -312px; 247 | top: 20px; 248 | transition: 0.5s; 249 | } 250 | .li-person22 { 251 | z-index: 22; 252 | left: -418px; 253 | top: 30px; 254 | transition: 0.5s; 255 | } 256 | .li-person23 { 257 | z-index: 23; 258 | left: -524px; 259 | top: 40px; 260 | transition: 0.5s; 261 | } 262 | .li-person24 { 263 | z-index: 27; 264 | left: 418px; 265 | top: 0px; 266 | transition: 0.5s; 267 | } 268 | .li-person25 { 269 | z-index: 26; 270 | left: 312px; 271 | top: 10px; 272 | transition: 0.5s; 273 | } 274 | .li-person26 { 275 | z-index: 25; 276 | left: 206px; 277 | top: 20px; 278 | transition: 0.5s; 279 | } 280 | .li-person27 { 281 | z-index: 24; 282 | left: 100px; 283 | top: 30px; 284 | transition: 0.5s; 285 | } 286 | .li-person28 { 287 | z-index: 28; 288 | left: -100px; 289 | top: 0px; 290 | transition: 0.5s; 291 | } 292 | .li-person29 { 293 | z-index: 29; 294 | left: -206px; 295 | top: 10px; 296 | transition: 0.5s; 297 | } 298 | .li-person30 { 299 | z-index: 30; 300 | left: -312px; 301 | top: 20px; 302 | transition: 0.5s; 303 | } 304 | .li-person31 { 305 | z-index: 31; 306 | left: -418px; 307 | top: 20px; 308 | transition: 0.5s; 309 | } 310 | .li-person32 { 311 | z-index: 36; 312 | left: 524px; 313 | top: 0px; 314 | transition: 0.5s; 315 | } 316 | .li-person33 { 317 | z-index: 33; 318 | left: 418px; 319 | top: 10px; 320 | transition: 0.5s; 321 | } 322 | .li-person34 { 323 | z-index: 34; 324 | left: 312px; 325 | top: 20px; 326 | transition: 0.5s; 327 | } 328 | .li-person35 { 329 | z-index: 33; 330 | left: 206px; 331 | top: 30px; 332 | transition: 0.5s; 333 | } 334 | .li-person36 { 335 | z-index: 32; 336 | left: 100px; 337 | top: 40px; 338 | transition: 0.5s; 339 | } 340 | .li-person37 { 341 | z-index: 37; 342 | left: -100px; 343 | top: 0px; 344 | transition: 0.5s; 345 | } 346 | .li-person38 { 347 | z-index: 38; 348 | left: -206px; 349 | top: 10px; 350 | transition: 0.5s; 351 | } 352 | .li-person39 { 353 | z-index: 39; 354 | left: -312px; 355 | top: 20px; 356 | transition: 0.5s; 357 | } 358 | .li-person40 { 359 | z-index: 40; 360 | left: -418px; 361 | top: 30px; 362 | transition: 0.5s; 363 | } 364 | .li-person41 { 365 | z-index: 41; 366 | left: -524px; 367 | top: 40px; 368 | transition: 0.5s; 369 | } 370 | .li-person42 { 371 | z-index: 45; 372 | left: 418px; 373 | top: 0px; 374 | transition: 0.5s; 375 | } 376 | .li-person43 { 377 | z-index: 44; 378 | left: 312px; 379 | top: 10px; 380 | transition: 0.5s; 381 | } 382 | .li-person44 { 383 | z-index: 43; 384 | left: 206px; 385 | top: 20px; 386 | transition: 0.5s; 387 | } 388 | .li-person45 { 389 | z-index: 42; 390 | left: 100px; 391 | top: 30px; 392 | transition: 0.5s; 393 | } 394 | .li-person46 { 395 | z-index: 28; 396 | left: -100px; 397 | top: 0px; 398 | transition: 0.5s; 399 | } 400 | .li-person47 { 401 | z-index: 29; 402 | left: -206px; 403 | top: 10px; 404 | transition: 0.5s; 405 | } 406 | .li-person48 { 407 | z-index: 30; 408 | left: -312px; 409 | top: 20px; 410 | transition: 0.5s; 411 | } 412 | .li-person49 { 413 | z-index: 31; 414 | left: -418px; 415 | top: 20px; 416 | transition: 0.5s; 417 | } 418 | .li-person50 { 419 | z-index: 36; 420 | left: 524px; 421 | top: 0px; 422 | transition: 0.5s; 423 | } 424 | .li-person51 { 425 | z-index: 33; 426 | left: 418px; 427 | top: 10px; 428 | transition: 0.5s; 429 | } 430 | .li-person52 { 431 | z-index: 34; 432 | left: 312px; 433 | top: 20px; 434 | transition: 0.5s; 435 | } 436 | .li-person53 { 437 | z-index: 33; 438 | left: 206px; 439 | top: 30px; 440 | transition: 0.5s; 441 | } 442 | .li-person54 { 443 | z-index: 32; 444 | left: 100px; 445 | top: 40px; 446 | transition: 0.5s; 447 | } 448 | .seat li div p { 449 | position: absolute; 450 | bottom: 0px; 451 | width: 100%; 452 | text-align: center; 453 | height: 20px; 454 | line-height: 20px; 455 | font-size: 14px; 456 | color: #fff; 457 | background: rgba(0,0,0,0.5); 458 | } 459 | .seat li img { 460 | width: 100%; 461 | height: 100%; 462 | } 463 | .seat li span { 464 | display: none; 465 | position: absolute; 466 | z-index: 200; 467 | bottom: 20px; 468 | width: 100%; 469 | text-align: center; 470 | line-height: 20px; 471 | font-size: 14px; 472 | color: #fff; 473 | background: rgba(0,0,0,0.5); 474 | } 475 | .seat #li14 span,.seat #li15 span,.seat #li49 span { 476 | background: rgba(0,0,0,0.8); 477 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LeidaMovie 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
Num:0
14 | 15 | 16 |
show
17 |
allChoice
18 |
start
19 | 20 | 21 |
22 | 457 |
458 | 459 | 460 | 461 | 462 | -------------------------------------------------------------------------------- /script/zain-window-basic.js: -------------------------------------------------------------------------------- 1 | function ZainWindow(name) { //Zain窗口构造函数 2 | //==========ZainWindow窗口对象的属性和默认值========== 3 | this.name = name; //窗口名字 4 | this.width = 300; //窗口宽度 5 | this.height = 300; //窗口高度 6 | this.maxWidth = 1366; //窗口最大宽度 7 | this.maxHeight = 768; //窗口最大高度 8 | this.minWidth = 200; //窗口与最小宽度 9 | this.minHeight = 30; //窗口最小高度 10 | this.titleHeight = 30; //顶部标题(控制窗口位置按钮)高度 11 | this.borderWidth = 6; //窗口边框粗细(用来鼠标缩放窗口的) 12 | this.left = 200; //窗口左边与父窗口左边的距离 13 | this.top = 100; //窗口上边与父窗口上边的距离 14 | 15 | //==========ZainWindow窗口对象的所有方法实现========== 16 | //在showWindowInfo()方法不存在的情况下,才会将它添加到原型(其中，if 语句检查的可以是初始化之后应该存在的任何属性或方法——不必用一大堆if 语句检查每个属性和每个方法；只要检查其中一个即可) 17 | if(typeof this.showWindowInfo != "function") { 18 | //-----设置窗口宽度----- 19 | ZainWindow.prototype.setWidth = function(width) { //设置窗口宽度 20 | this.width = parseInt(width); 21 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 22 | return this; //返回this就是返回了当前使用这个函数的对象,可以实现连续样式修改,例如:windowZain.setWidth("600px").setHeight("600px"); 23 | } 24 | //-----设置窗口高度----- 25 | ZainWindow.prototype.setHeight = function(height) { //设置窗口高度 26 | this.height = parseInt(height); 27 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 28 | return this; 29 | } 30 | 31 | //-----设置窗口最大宽度----- 32 | ZainWindow.prototype.setMaxWidth = function(maxWidth) { //设置窗口高度 33 | var er = "", max = minWidthShow; //窗口信息设置错误报告 34 | if(parseInt(maxWidth) < minWidthShow) { 35 | er += this.name+"窗口的最大宽度不能小于最小宽度"+minWidthShow+"\n"; 36 | max = minWidthShow > max ? minWidthShow : max; 37 | } 38 | if(parseInt(maxWidth) < this.width) { 39 | er += this.name+"窗口的最大宽度不能小于当前宽度"+this.width+"\n"; 40 | max = this.width > max ? this.width : max; 41 | } 42 | if(er != "") { 43 | alert(er+this.name+"的最大宽度应该(>="+max+")\n"); 44 | return this; 45 | } 46 | this.maxWidth = parseInt(maxWidth); 47 | maxWidthShow = this.maxWidth; 48 | return this; 49 | } 50 | //-----设置窗口最大高度----- 51 | ZainWindow.prototype.setMaxHeight = function(maxHeight) { //设置窗口高度 52 | var er = "", max = minHeightShow; //窗口信息设置错误报告 53 | if(parseInt(maxHeight) < minHeightShow) { 54 | er += this.name+"窗口的最大高度不能小于最小高度"+minHeightShow+"\n"; 55 | max = minHeightShow > max ? minHeightShow : max; 56 | } 57 | if(parseInt(maxHeight) < this.height) { 58 | er += this.name+"窗口的最大高度不能小于当前高度"+this.height+"\n"; 59 | max = this.height > max ? this.height : max; 60 | } 61 | if(er != "") { 62 | alert(er+this.name+"的最大高度应该(>="+max+")\n"); 63 | return this; 64 | } 65 | this.maxHeight = parseInt(maxHeight); 66 | maxHeightShow = this.maxHeight; 67 | return this; 68 | } 69 | //-----设置窗口最小宽度----- 70 | ZainWindow.prototype.setMinWidth = function(minWidth) { //设置窗口高度 71 | var er = "", min = maxWidthShow; //窗口信息设置错误报告 72 | if(parseInt(minWidth) > maxWidthShow) { 73 | er += this.name+"窗口的最小宽度不能大于最大宽度"+maxWidthShow+"\n"; 74 | min = maxWidthShow < min ? maxWidthShow : min; 75 | } 76 | if(parseInt(minWidth) > this.width) { 77 | er += this.name+"窗口的最小宽度不能大于当前宽度"+this.width+"\n"; 78 | min = this.width < min ? this.width : min; 79 | } 80 | if(er != "") { 81 | alert(er+this.name+"的最小宽度应该(>0 && <="+min+")\n"); 82 | return this; 83 | } 84 | this.minWidth = parseInt(minWidth); 85 | minWidthShow = this.minWidth; 86 | return this; 87 | } 88 | //-----设置窗口最小高度----- 89 | ZainWindow.prototype.setMinHeight = function(minHeight) { //设置窗口高度 90 | var er = "", min = maxHeightShow; //窗口信息设置错误报告 91 | if(parseInt(minHeight) > maxHeightShow) { 92 | er += this.name+"窗口的最小高度不能大于最大高度"+maxHeightShow+"\n"; 93 | min = maxHeightShow < min ? maxHeightShow : min; 94 | } 95 | if(parseInt(minHeight) > this.height) { 96 | er += this.name+"窗口的最小高度不能大于当前高度"+this.height+"\n"; 97 | min = this.height < min ? this.height : min; 98 | } 99 | if(er != "") { 100 | alert(er+this.name+"的最小高度应该(>0 && <="+min+")\n"); 101 | return this; 102 | } 103 | this.minHeight = parseInt(minHeight); 104 | minHeightShow = this.minHeight; 105 | return this; 106 | } 107 | 108 | //-----设置窗口顶部标题(控制窗口位置按钮)高度----- 109 | ZainWindow.prototype.setBorderWidth = function(borderWidth) { //设置窗口顶部标题(控制窗口位置按钮)高度 110 | this.borderWidth = parseInt(borderWidth); 111 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 112 | return this; 113 | } 114 | //-----设置窗口边框粗细(用来鼠标缩放窗口的)----- 115 | ZainWindow.prototype.setTitleHeight = function(titleHeight) { //设置窗口顶部标题(控制窗口位置按钮)高度 116 | this.titleHeight = parseInt(titleHeight); 117 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 118 | return this; 119 | } 120 | //-----设置窗口左边与父窗口左边的距离----- 121 | ZainWindow.prototype.setLeft = function(left) { //设置窗口左边与父窗口左边的距离 122 | this.left = parseInt(left); 123 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 124 | return this; 125 | } 126 | //-----设置窗口上边与父窗口上边的距离----- 127 | ZainWindow.prototype.setTop = function(top) { //设置窗口上边与父窗口上边的距离 128 | this.top = parseInt(top); 129 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //实时更新窗口的初始化数据 130 | return this; 131 | } 132 | //-----显示窗口信息----- 133 | ZainWindow.prototype.showWindowInfo = function() { //显示窗口信息 134 | var windowInfo = this.name+":\n"+ 135 | "\twidth:"+this.width+"\n"+ 136 | "\theight:"+this.height+"\n"+ 137 | "\tmaxWidth:"+this.maxWidth+"\n"+ 138 | "\tmaxHeight:"+this.maxHeight+"\n"+ 139 | "\tminWidth:"+this.minWidth+"\n"+ 140 | "\tminHeight:"+this.minHeight+"\n"+ 141 | "\ttitleHeight:"+this.titleHeight+"\n"+ 142 | "\tborderWidth:"+this.borderWidth+"\n"+ 143 | "\tleft:"+this.left+"\n"+ 144 | "\ttop:"+this.top; 145 | console.log(windowInfo); 146 | return this; 147 | } 148 | } 149 | 150 | //==============ZainWindow窗口的相关功能实现方法================== 151 | //--==--!!搜索指定对象非常重要,可以利用其它自定义属性或原生属性代替窗口元素(标签)--==-- 152 | //-----在element元素中寻找zain-window-name属性值为name的对象,返回值为找到的对象----- 153 | //参数分别为元素(标签)名、标签内属性、属性值 154 | function seekObject(element, property, propertyName) { //寻找指定元素和指定属性和属性名的对象 155 | var o = document.getElementsByTagName(element); 156 | for(var i = 0; i < o.length; i++) { 157 | //注意如果是窗口的非整体部分需要通过其父元素来判断是否是当前需要找的窗口里的部分(这种方法简化了html里的代码) 158 | if((element == "zain-window" && o[i].getAttribute(property) == propertyName) || (element != "zain-window" && o[i].parentNode.getAttribute(property) == propertyName)) { //判断属性为zain-window-name的zain-window标签的改属性值是否等于当前窗口名 159 | return o[i]; 160 | } 161 | } 162 | 163 | //同时兼容用div和id来创建窗口 164 | //对div元素(标签)生成的zainWindow窗口的检索,element将被id属性值替代 165 | var od = document.getElementsByTagName("div"); 166 | for(var i = 0; i < od.length; i++) { 167 | if(od[i].id == element && ((element == "zain-window" && od[i].getAttribute(property) == propertyName) || (element != "zain-window" && od[i].parentNode.getAttribute(property) == propertyName))) { 168 | return od[i]; 169 | } 170 | } 171 | } 172 | // console.log(seekObject("zain-window", "zain-window-name", name)); 173 | 174 | //-----创建并实例化新窗口的所有元素(标签)----- 175 | createWindowElement(this.name); //创建并实例化新窗口的所有元素(标签) 176 | function createWindowElement(name) { //创建并实例化新窗口的所有元素(标签)(参数为当前窗口名字) 177 | document.createElement("zain-window"); //实例化自定义标签(告诉浏览器我要创建一个名为zain-window的新标签)(防止低版本浏览器不兼容) 178 | document.createElement("zain-window-title"); 179 | document.createElement("zain-window-content"); 180 | document.createElement("zain-window-left-top"); 181 | document.createElement("zain-window-top"); 182 | // zainWindowLeftTop.setAttribute('zain-window-name', 'ZainChen'); //创建自定义属性zain-window-name属性值为ZainChen 183 | var zw = seekObject("zain-window", "zain-window-name", name); //寻找指定元素和指定属性和属性名的对象 184 | zw.innerHTML += "" 185 | + "" 186 | + "" 187 | + "" 188 | + "" 189 | + "" 190 | + "" 191 | + ""; 192 | } 193 | 194 | //-----初始化窗口所有部分实际宽高----- 195 | //参数分别对应窗口名,整个窗口的初始宽,高,顶部标题(控制窗口位置按钮)高度,窗口边框粗细,整个窗口初始位置(left为距左边,top为距顶部距离) 196 | InitializeWindow(this.name, this.width, this.height, this.titleHeight, this.borderWidth, this.left, this.top); //初始化窗口所有部分实际宽高 197 | function InitializeWindow(name, width, height, titleHeight, borderWidth, left, top) { 198 | var zw = seekObject("zain-window", "zain-window-name", name); //寻找指定元素和指定属性和属性名的对象 199 | zw.style.width = width+"px"; 200 | zw.style.height = height+"px"; 201 | zw.style.left = left+"px"; 202 | zw.style.top = top+"px"; 203 | var zwti = seekObject("zain-window-title", "zain-window-name", name); 204 | zwti.style.width = zw.style.width; 205 | zwti.style.height = titleHeight+"px"; 206 | zwti.style.left = "0px"; 207 | zwti.style.top = "0px"; 208 | var zwcon = seekObject("zain-window-content", "zain-window-name", name); 209 | zwcon.style.width = zw.style.width; 210 | zwcon.style.height = height-titleHeight+"px"; 211 | zwcon.style.left = "0px"; 212 | zwcon.style.top = titleHeight+"px"; 213 | var zwlt = seekObject("zain-window-left-top", "zain-window-name", name); 214 | zwlt.style.width = borderWidth+"px"; 215 | zwlt.style.height = borderWidth+"px"; 216 | zwlt.style.left = "0px"; 217 | zwlt.style.top = "0px"; 218 | var zwt = seekObject("zain-window-top", "zain-window-name", name); 219 | zwt.style.width = width-2*borderWidth+"px"; 220 | zwt.style.height = borderWidth+"px"; 221 | zwt.style.left = borderWidth+"px"; 222 | zwt.style.top = "0px"; 223 | var zwrt = seekObject("zain-window-right-top", "zain-window-name", name); 224 | zwrt.style.width = borderWidth+"px"; 225 | zwrt.style.height = borderWidth+"px"; 226 | zwrt.style.left = width-borderWidth+"px"; 227 | zwrt.style.top = "0px"; 228 | var zwl = seekObject("zain-window-left", "zain-window-name", name); 229 | zwl.style.width = borderWidth+"px"; 230 | zwl.style.height = height-2*borderWidth+"px"; 231 | zwl.style.left = "0px"; 232 | zwl.style.top = borderWidth+"px"; 233 | var zwr = seekObject("zain-window-right", "zain-window-name", name); 234 | zwr.style.width = borderWidth+"px"; 235 | zwr.style.height = height-2*borderWidth+"px"; 236 | zwr.style.left = width-borderWidth+"px"; 237 | zwr.style.top = borderWidth+"px"; 238 | var zwlb = seekObject("zain-window-left-bottom", "zain-window-name", name); 239 | zwlb.style.width = borderWidth+"px"; 240 | zwlb.style.height = borderWidth+"px"; 241 | zwlb.style.left = "0px"; 242 | zwlb.style.top = height-borderWidth+"px"; 243 | var zwb = seekObject("zain-window-bottom", "zain-window-name", name); 244 | zwb.style.width = width-2*borderWidth+"px"; 245 | zwb.style.height = borderWidth+"px"; 246 | zwb.style.left = borderWidth+"px"; 247 | zwb.style.top = height-borderWidth+"px"; 248 | var zwrb = seekObject("zain-window-right-bottom", "zain-window-name", name); 249 | zwrb.style.width = borderWidth+"px"; 250 | zwrb.style.height = borderWidth+"px"; 251 | zwrb.style.left = width-borderWidth+"px"; 252 | zwrb.style.top = height-borderWidth+"px"; 253 | } 254 | 255 | //-----窗口所有相关部分对象-------- 256 | var zw = seekObject("zain-window", "zain-window-name", name); //寻找指定元素和指定属性和属性名的对象 257 | var zwti = seekObject("zain-window-title", "zain-window-name", name); 258 | var zwcon = seekObject("zain-window-content", "zain-window-name", name); 259 | var zwlt = seekObject("zain-window-left-top", "zain-window-name", name); 260 | var zwt = seekObject("zain-window-top", "zain-window-name", name); 261 | var zwrt = seekObject("zain-window-right-top", "zain-window-name", name); 262 | var zwl = seekObject("zain-window-left", "zain-window-name", name); 263 | var zwr = seekObject("zain-window-right", "zain-window-name", name); 264 | var zwlb = seekObject("zain-window-left-bottom", "zain-window-name", name); 265 | var zwb = seekObject("zain-window-bottom", "zain-window-name", name); 266 | var zwrb = seekObject("zain-window-right-bottom", "zain-window-name", name); 267 | 268 | //------实时根据最外层zain-window调整所有window宽高和位置函数----- 269 | function adjustWindow() { 270 | zwti.style.width = zw.style.width; 271 | zwcon.style.width = zw.style.width; 272 | zwcon.style.height = parseInt(zw.style.height)-parseInt(zwti.style.height)+"px"; 273 | zwt.style.width = parseInt(zw.style.width)-2*parseInt(zwlt.style.width)+"px"; 274 | zwrt.style.left = parseInt(zw.style.width)-parseInt(zwlt.style.width)+"px"; 275 | zwl.style.height = parseInt(zw.style.height)-2*parseInt(zwlt.style.width)+"px"; 276 | zwr.style.height = parseInt(zw.style.height)-2*parseInt(zwlt.style.width)+"px"; 277 | zwr.style.left = parseInt(zw.style.width)-parseInt(zwlt.style.width)+"px"; 278 | zwlb.style.top = parseInt(zw.style.height)-parseInt(zwlt.style.height)+"px"; 279 | zwb.style.width = parseInt(zw.style.width)-2*parseInt(zwlt.style.width)+"px"; 280 | zwb.style.top = parseInt(zw.style.height)-parseInt(zwlt.style.height)+"px"; 281 | zwrb.style.left = parseInt(zw.style.width)-parseInt(zwlt.style.width)+"px"; 282 | zwrb.style.top = parseInt(zw.style.height)-parseInt(zwlt.style.height)+"px"; 283 | } 284 | 285 | //---------------鼠标拖动控制窗口放大缩小和移动等功能实现------------ 286 | 287 | //-----窗口最大最小宽高储存变量------- 288 | var maxWidthShow = this.maxWidth; //窗口最大宽度 289 | var maxHeightShow = this.maxHeight; //窗口最大高度 290 | var minWidthShow = this.minWidth; //窗口与最小宽度 291 | var minHeightShow = this.minHeight; //窗口最小高度 292 | 293 | mouseControlWindow(this.name); 294 | function mouseControlWindow(name) { 295 | var winThis = ""; //记录当前点中待拖动的窗口 296 | var msdX = null; //鼠标按下时的x坐标 297 | var msdY = null; //鼠标按下时的y坐标 298 | var msdWLeft = null; //鼠标按下时当前窗口左边与父窗口左边的距离 299 | var msdWTop = null; //鼠标按下时当前窗口上边与父窗口上边的距离 300 | var msdWidth = null; //鼠标按下时当前窗口宽度 301 | var msdHeight = null; //鼠标按下时当前窗口高度 302 | 303 | //---------------------鼠标按下事件--------------------- 304 | zwti.addEventListener("mousedown", zainWindowMouseDown); //上方移动窗口按钮 305 | zwcon.addEventListener("mousedown", zainWindowMouseDown); //窗口中间内容部分 306 | zwlt.addEventListener("mousedown", zainWindowMouseDown); //左上角按钮拖拽扩大缩小 307 | zwt.addEventListener("mousedown", zainWindowMouseDown); //上方按钮 308 | zwrt.addEventListener("mousedown", zainWindowMouseDown); //右上角按钮 309 | zwl.addEventListener("mousedown", zainWindowMouseDown); //左方按钮 310 | zwr.addEventListener("mousedown", zainWindowMouseDown); //右方按钮 311 | zwlb.addEventListener("mousedown", zainWindowMouseDown); //左下角按钮 312 | zwb.addEventListener("mousedown", zainWindowMouseDown); //下方按钮 313 | zwrb.addEventListener("mousedown", zainWindowMouseDown); //右下角按钮 314 | function zainWindowMouseDown(e) { 315 | //控制窗口层级变化需要组织事件冒泡 316 | //阻止冒泡事件(如果不阻止冒泡事件,窗口嵌套的层级变化会出问题,原理是叠在一起的玻璃,敲碎最上面层的玻璃不会波及到其下层的玻璃) 317 | if(e && e.stopPropagation){ //非IE 318 | e.stopPropagation(); 319 | } else{ //IE 320 | window.event.cancelBubble=true; 321 | } 322 | zIndexWindow("zain-window", "zain-window-name", name); //多个窗口层级控制函数(使鼠标单击到的窗口显示在z-index:100的层级中,防止被其他窗口覆盖) 323 | winThis = this; //console.log(this); 324 | //document.all是页面内所有元素的一个集合。例如：document.all(0)表示页面内第一个元素;document.all可以判断浏览器是否是IE 325 | //这是firefox对于鼠标事件的捕捉,ie使用的是setCapture()函数,非常适合用于拖拽功能中捕捉鼠标事件 326 | document.all ? windowThis.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 327 | msdX = e.clientX-parseInt(zw.style.left); //鼠标单击点与当前窗口最左边的距离 328 | msdY = e.clientY-parseInt(zw.style.top); //鼠标单击点与当前窗口最上边的距离 329 | msdWLeft = parseInt(zw.style.left); //鼠标单击时当前窗口与父窗口最左边的距离 330 | msdWTop = parseInt(zw.style.top); //鼠标单击时当前窗口与父窗口最上边的距离 331 | msdWidth = parseInt(zw.style.width); //鼠标单击到的当前窗口的宽度 332 | msdHeight = parseInt(zw.style.height); //鼠标单击到的当前窗口的高度 333 | //---改变鼠标样式--- 334 | var html = document.getElementsByTagName("html")[0]; 335 | if(winThis == zwti) { 336 | html.style.cursor = "crosshair"; 337 | } else if(winThis == zwlt) { 338 | html.style.cursor = "nw-resize"; 339 | } else if(winThis == zwt) { 340 | html.style.cursor = "n-resize"; 341 | } else if(winThis == zwrt) { 342 | html.style.cursor = "ne-resize"; 343 | } else if(winThis == zwl) { 344 | html.style.cursor = "w-resize"; 345 | } else if(winThis == zwr) { 346 | html.style.cursor = "e-resize"; 347 | } else if(winThis == zwlb) { 348 | html.style.cursor = "sw-resize"; 349 | } else if(winThis == zwb) { 350 | html.style.cursor = "s-resize"; 351 | } else if(winThis == zwrb) { 352 | html.style.cursor = "se-resize"; 353 | } 354 | } 355 | 356 | //--------------------鼠标移动事件-------------------- 357 | document.addEventListener("mousemove", zainWindowMouseMove); 358 | function zainWindowMouseMove(e) { 359 | if(winThis != "") { //在鼠标没选中任何窗口时提高效率 360 | //----鼠标拖动改变窗口宽度与左边距---- 361 | // console.log(maxWidthShow+", "+maxHeightShow+", "+minWidthShow+", "+minHeightShow); 362 | if(winThis == zwlt || winThis == zwl || winThis == zwlb) { //左方按钮改变最外层window-all的宽 363 | if(msdWidth+msdWLeft-(e.clientX-msdX) >= minWidthShow && msdWidth+msdWLeft-(e.clientX-msdX) <= maxWidthShow) { //控制窗口的最大最小宽度 364 | zw.style.width = msdWidth+msdWLeft-(e.clientX-msdX)+"px"; 365 | } else if(msdWidth+msdWLeft-(e.clientX-msdX) < minWidthShow) { //以下两个判断可防止鼠标移动坐标改变太快超出窗口最大最小临界值而无法改变窗口大小 366 | zw.style.width = minWidthShow+"px"; 367 | zw.style.left = msdWidth+msdWLeft-minWidthShow+"px"; 368 | } else if(msdWidth+msdWLeft-(e.clientX-msdX) > maxWidthShow) { 369 | zw.style.width = maxWidthShow+"px"; 370 | zw.style.left = msdWidth+msdWLeft-maxWidthShow+"px"; 371 | } 372 | } else if(winThis == zwrt || winThis == zwr || winThis == zwrb) { //右方按钮改变最外层zain-window的宽 373 | if(msdWidth-msdWLeft+(e.clientX-msdX) >= minWidthShow && msdWidth-msdWLeft+(e.clientX-msdX) <= maxWidthShow) { 374 | zw.style.width = msdWidth-msdWLeft+(e.clientX-msdX)+"px"; 375 | } else if(msdWidth-msdWLeft+(e.clientX-msdX) < minWidthShow) { //以下两个判断可防止鼠标移动坐标改变太快超出窗口最大最小临界值而无法改变窗口大小 376 | zw.style.width = minWidthShow+"px"; 377 | } else if(msdWidth-msdWLeft+(e.clientX-msdX) > maxWidthShow) { 378 | zw.style.width = maxWidthShow+"px"; 379 | } 380 | } 381 | if(((winThis == zwlt || winThis == zwl || winThis == zwlb) && msdWidth+msdWLeft-(e.clientX-msdX) >= minWidthShow && msdWidth+msdWLeft-(e.clientX-msdX) <= maxWidthShow) || winThis == zwti) zw.style.left = (e.clientX-msdX)+"px"; //左方按钮改变最外层window-all的左边距 382 | //----鼠标拖动改变窗口高度与上边距---- 383 | if(winThis == zwlt || winThis == zwt || winThis == zwrt) { //上方按钮改变最外层window-all的高 384 | if(msdHeight+msdWTop-(e.clientY-msdY) >= minHeightShow && msdHeight+msdWTop-(e.clientY-msdY) <= maxHeightShow) { // //控制窗口的最大最小高度 385 | zw.style.height = msdHeight+msdWTop-(e.clientY-msdY)+"px"; 386 | } else if(msdHeight+msdWTop-(e.clientY-msdY) < minHeightShow) { //以下两个判断可防止鼠标移动坐标改变太快超出窗口最大最小临界值而无法改变窗口大小 387 | zw.style.height = minHeightShow+"px"; 388 | zw.style.top = msdHeight+msdWTop-minHeightShow+"px"; 389 | } else if(msdHeight+msdWTop-(e.clientY-msdY) > maxHeightShow) { 390 | zw.style.height = maxHeightShow+"px"; 391 | zw.style.top = msdHeight+msdWTop-maxHeightShow+"px"; 392 | } 393 | } else if(winThis == zwlb || winThis == zwb || winThis == zwrb) { //下方按钮改变最外层window-all的高 394 | if(msdHeight-msdWTop+(e.clientY-msdY) >= minHeightShow && msdHeight-msdWTop+(e.clientY-msdY) <= maxHeightShow) { 395 | zw.style.height = msdHeight-msdWTop+(e.clientY-msdY)+"px"; 396 | } else if(msdHeight-msdWTop+(e.clientY-msdY) < minHeightShow){ //以下两个判断可防止鼠标移动坐标改变太快超出窗口最大最小临界值而无法改变窗口大小 397 | zw.style.height = minHeightShow+"px"; 398 | } else if(msdHeight-msdWTop+(e.clientY-msdY) > maxHeightShow) { 399 | zw.style.height = maxHeightShow+"px"; 400 | } 401 | } 402 | if(((winThis == zwlt || winThis == zwt || winThis == zwrt) && msdHeight+msdWTop-(e.clientY-msdY) >= minHeightShow && msdHeight+msdWTop-(e.clientY-msdY) <= maxHeightShow) || winThis == zwti) zw.style.top = (e.clientY-msdY)+"px"; //上方按钮改变最外层window-all的上边距 403 | adjustWindow(); //实时根据最外层zain-window调整所有window宽高和位置函数 404 | } 405 | } 406 | 407 | //--------------------鼠标松开事件-------------------- 408 | document.addEventListener("mouseup", zainWindowMouseUp); 409 | function zainWindowMouseUp() { //鼠标松开事件 410 | document.getElementsByTagName("html")[0].style.cursor = "default"; 411 | if(winThis) { 412 | document.all ? windowThis.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 413 | winThis = ""; 414 | noOutParentWindow(); //使子窗口不会移出父窗口的范围 415 | } 416 | } 417 | 418 | //---类似前面的seekObject寻找指定对象方法--- 419 | //-----多个窗口层级控制函数(使鼠标单击到的窗口显示在z-index:100的层级中,防止被其他窗口覆盖)======================== 420 | function parentZIndex(p) { //使当前窗口的所有外层窗口整体层级都变为100 421 | if(p != null) { 422 | p = p.parentNode; 423 | } 424 | while(p != document.getElementsByTagName("body")[0] && p != null) { 425 | if(p != zwcon) { 426 | p.style.zIndex = "100"; 427 | } 428 | if(p != null) { 429 | p = p.parentNode; 430 | } 431 | } 432 | } 433 | function zIndexWindow(element, property, propertyName) { 434 | var o = document.getElementsByTagName(element); 435 | for(var i = 0; i < o.length; i++) { 436 | if(o[i].getAttribute(property) == propertyName) { //判断属性为zain-window-name的zain-window标签的改属性值是否等于当前窗口名 437 | o[i].style.zIndex = "100"; 438 | parentZIndex(o[i]); //使当前窗口的所有外层窗口层级都变为100 439 | } else { 440 | o[i].style.zIndex = "1"; 441 | } 442 | } 443 | 444 | //同时兼容用div和id来创建窗口 445 | //对div元素(标签)生成的zainWindow窗口的检索,element将被id属性值替代 446 | var od = document.getElementsByTagName("div"); 447 | for(var i = 0; i < od.length; i++) { 448 | if(od[i].id == element && od[i].getAttribute(property) == propertyName) { 449 | od[i].style.zIndex = "100"; 450 | parentZIndex(o[i]); //使当前窗口的所有外层窗口层级都变为100 451 | } else { 452 | od[i].style.zIndex = "1"; 453 | } 454 | } 455 | } 456 | 457 | //-----使子窗口不会移出父窗口的范围----- 458 | function noOutParentWindow() { //使子窗口不会移出父窗口的范围 459 | if(parseInt(zw.style.top) <= 0) zw.style.top = "0px"; //使窗口不能从父窗口顶部移出父窗口范围 460 | // console.log(zw.parentNode.nextElementSibling); //当前节点的父节点的下一个兄弟节点元素对象 461 | var fnw = zw.parentNode.nextElementSibling; //当前节点的父节点的下一个兄弟节点元素对象(父窗口的左上角zwlt对象) 462 | if(fnw != null) { fnw = parseInt(fnw.style.width); } //父窗口的左上角zwlt对象的宽度 463 | if(parseInt(zw.style.left) <= -parseInt(zw.style.width)+2*parseInt(zwlt.style.width)+2*fnw) zw.style.left = -parseInt(zw.style.width)+2*parseInt(zwlt.style.width)+2*fnw+"px"; //使窗口不能从父窗口左部移出父窗口范围 464 | var fw = 0, fh = 0; 465 | if(zw.parentNode == document.getElementsByTagName("body")[0]) { 466 | // console.log(document.body.clientWidth+", "+document.body.clientHeight); 467 | fw = parseInt(document.body.clientWidth); 468 | fh = parseInt(document.body.clientHeight); 469 | } else { 470 | fw = parseInt(zw.parentNode.style.width); 471 | fh = parseInt(zw.parentNode.style.height); 472 | } 473 | if(parseInt(zw.style.top) >= fh-2*parseInt(zwlt.style.width)-2*fnw) zw.style.top = fh-2*parseInt(zwlt.style.width)-2*fnw+"px"; 474 | if(parseInt(zw.style.left) >= fw-2*parseInt(zwlt.style.width)-2*fnw) zw.style.left = fw-2*parseInt(zwlt.style.width)-2*fnw+"px"; 475 | } 476 | 477 | // 478 | } 479 | } 480 | 481 | // function zainExecute() { 482 | // } 483 | // window.onload = zainExecute //在文档加载完成后才能够去执行,可以避免获取不到对象的情况,同时可以避免定义全局变量和函数 --------------------------------------------------------------------------------