需要注意的问题包括:
1.this的指向到底是指向谁--弄清楚所指的对象
2.深入理解原型的概念及使用：
去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能)
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>弹窗拖拽组件开发</title>
6 <style type="text/css">
7 body,p,input{margin: 0;padding:0;}
8 form{text-align:center;}
9 form input{width:50px;font-size: 14px;height: 30px;z-index: 333;position: relative;}
10 .diag{background: #3D95D5;position: absolute;z-index: 2;}
11 .diag p{line-height: 20px;background: #f00;height:20px;}
12 .diag span{font-size: 12px;float: left;padding-left:20px; }
13 .diag .close{font-size: 20px;float: right;padding-right:10px; cursor: default;}
14 #mark{width:500px;height:500px;background: orange;position: absolute;left: 0;top:0;z-index: 1;
15 opacity: 0.3; filter:alpha(opacity=30);}
16 </style>
17 <script type="text/javascript">
18 window.onload=function(){
19 var aInput = document.getElementsByTagName("input");
20
21 aInput[0].onclick=function(){
22 var d1 = new Dialog();
23 d1.init({
24 title:"新闻",
25 iNow:1
26 });
27 };
28 aInput[1].onclick=function(){
29 var d1 = new Dialog();
30 d1.init({
31 w:150,
32 h:150,
33 dir:"rightBottom",
34 title:"购物",
35 iNow:2
36 });
37 };
38 aInput[2].onclick=function(){
39 var d1 = new Dialog();
40 d1.init({
41 dir:"rightTop",
42 mark:true,
43 title:"旅游",
44 iNow:3
45 });
46 };
47 aInput[3].onclick=function(){
48 var d1 = new Dialog();
49 d1.init({
50 dir:"rightTop",
51 move:true,
52 title:"狂欢",
53 iNow:4
54 });
55 };
56 function Dialog(){
57 this.disX=0;
58 this.disY=0;
59 this.oDiag=null;
60 this.settings={
61 w:200,
62 h:200,
63 dir:"center",
64 title:"",
65 mark:false,
66 move:false
67 };
68 };
69 Dialog.prototype.json={};
70 Dialog.prototype.init=function(opt){
71 extend(this.settings,opt);
72
73 if(this.json[opt.iNow] == undefined){
74 this.json[opt.iNow]=true;
75 }
76 if(this.json[opt.iNow]){
77 this.Create();
78 this.fnClose();
79
80 if(this.settings.move){
81 this.move();
82 }
83 if(this.settings.mark){
84 this.CreateMark();
85 }
86 this.json[opt.iNow]=false;
87 }
88 };
89
90 Dialog.prototype.Create=function(){
91 this.oDiag = document.createElement("div");
92 this.oDiag.className = "diag";
93 this.oDiag.innerHTML = ‘<p><span>‘+this.settings.title+‘</span><span class="close">X</span></p>‘;
94 document.body.appendChild(this.oDiag);
95
96 this.setData();
97 };
98 Dialog.prototype.move=function(){
99 var This=this;
100
101 this.oDiag.onmousedown=function(ev){
102 var ev = ev || window.event;
103 This.fnDown(ev);
104 This.oDiag.style.zIndex+=2;
105
106 document.onmousemove=function(ev){
107 var ev = ev || window.event;
108 This.fnMove(ev);
109 }
110 document.onmouseup=function(){
111 This.fnUp();
112 }
113 }
114 };
115 Dialog.prototype.fnDown=function(ev){
116 this.disX=ev.clientX-this.oDiag.offsetLeft;
117 this.disY=ev.clientY-this.oDiag.offsetTop;
118 }
119 Dialog.prototype.fnMove=function(ev){
120 this.oDiag.style.left=ev.clientX-this.disX+"px";
121 this.oDiag.style.top=ev.clientY-this.disY+"px";
122 }
123 Dialog.prototype.fnUp=function(){
124 document.onmousemove=null;
125 document.onmouseup=null;
126 }
127 //创建标记
128 Dialog.prototype.CreateMark=function(){
129 var oMark = document.createElement("div");
130 oMark.id="mark";
131 document.body.appendChild(oMark);
132 this.oMark=oMark;
133 oMark.style.width=viewWidth()+"px";
134 oMark.style.height=viewHeight()+"px";
135 }
136 //设置数据
137 Dialog.prototype.setData=function(){
138 this.oDiag.style.width = this.settings.w+"px";
139 this.oDiag.style.height = this.settings.h+"px";
140
141 if(this.settings.dir=="center"){
142 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)/2+"px";
143 this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)/2+"px";
144 }
145 else if(this.settings.dir=="rightBottom"){
146 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px";
147 this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)+"px";
148 }
149 else if(this.settings.dir=="rightTop"){
150 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px";
151 this.oDiag.style.top=0+"px";
152 }
153 }
154 //关闭弹窗
155 Dialog.prototype.fnClose=function(){
156 var This=this;
157 var oClose = this.oDiag.getElementsByTagName("span")[1];
158 oClose.onclick=function(){
159 document.body.removeChild(This.oDiag);
160 if(This.settings.mark){
161 document.body.removeChild(This.oMark);
162 }
163 This.json[This.settings.iNow]=true;
164 };
165 };
166 //可视区的宽
167 function viewWidth(){
168 return document.documentElement.clientWidth;
169 }
170 //可视区的高
171 function viewHeight(){
172 return document.documentElement.clientHeight;
173 }
174 //继承
175 function extend(obj1,obj2){
176 for(var attr in obj2){
177 obj1[attr] = obj2[attr];
178 }
179 }
180 }
181
182 </script>
183 </head>
184 <body>
185 <form>
186 <input type="button" value="新闻">
187 <input type="button" value="购物">
188 <input type="button" value="旅游">
189 <input type="button" value="狂欢">
190 </form>
191
192
193
194 </body>
195 </html>
时间： 2024-08-26 10:40:59