javascript学习(一）

最近在做一个在图片上画矩形框的任务。

在网上先找了一段代码，准备进行学习。

Javascript代码：

1. DrawRectangle = function(id, onMouseUp, className){    
2.       
3.     document.οncοntextmenu=function() {    
4.        return true;    
5.     };  
6.           
7.     this.IMG = document.getElementById(id);    
8.       
9.     var masker = document.createElement("div");  
10.     masker.id = "mask_" + id;  
11.     var position = this.getAbsolutePosition(this.IMG);  
12.       
13.     masker.style.width = position.width + "px";  
14.     masker.style.height = position.height + "px";  
15.     masker.style.left = position.left;  
16.     masker.style.top = position.top;  
17.     masker.style["background-image"] = "url("+this.IMG.src+")";  
18.     masker.className = "imgmasker";  
19.   
20.     this.masker = masker;  
21.     this.IMG.parentNode.appendChild(masker);  
22.     this.IMG.parentNode.removeChild(this.IMG);  
23.       
24.     this.isDraw = false;    
25.     this.isMouseUp = true;    
26.     this.index = 0;    
27.     this.currentDrawRectangle = null;    
28.     this.className = className;    
29.         
30.     this.RectangleDivs = [];    
31.         
32.     this.debug = true;    
33.     
34.     this._onMouseUp = onMouseUp;    
35.         
36.     this.bindListener();    
37. };  
38.     
39. DrawRectangle.prototype = {    
40.     bindListener: function(){    
41.         
42.         this.masker.onmousemove = this.dragSize.bind(this);    
43.         this.masker.onmouseup = this.onMouseUp.bind(this);    
44.         this.masker.onmouseout = this.onMouseOut.bind(this);    
45.         this.masker.onmouseover = this.onMouseOver.bind(this);    
46.         this.masker.onmousedown = this.drawLayer.bind(this);    
47.         this.masker.onmouseup = this.onMouseUp.bind(this);    
48.     },    
49.     drawLayer: function(){    
50.         //this.IMG.setCapture(true);    
51.         this.isDraw = true;    
52.         this.ismouseup = false;    
53.         this.index++;    
54.             
55.         var pos = this.getSourcePos();    
56.             
57.         var x = event.offsetX;     
58.         var y = event.offsetY;     
59.     
60.         var top = y + pos.top - 2;    
61.         var left = x + pos.left - 2;    
62.            
63.         var d = document.createElement("div");    
64.        // document.body.appendChild(d);  
65.         this.masker.appendChild(d);  
66.         d.style.border = "1px solid #ff0000";    
67.         d.style.width = 0;    
68.         d.style.height = 0;    
69.         d.style.overflow = "hidden";    
70.         d.style.position = "absolute";    
71.         d.style.left = left + "px";  
72.         d.style.top = top + "px";   
73.         d.style.opacity = 0.5;  
74.           
75.         d.style["z-index"] = 2;  
76.         if(this.className) {    
77.             d.className = this.className;    
78.         }    
79.         d.id = "draw" + this.index;    
80.         if (this.debug) {    
81.             d.innerHTML = "<div class='innerbg'>x:" + x + ",y:" + y + "..</div>";    
82.         }    
83.             
84.         this.currentDrawRectangle = d;    
85.             
86.         this.RectangleDivs[this.index] = {    
87.             left: left,    
88.             top: top,    
89.             el: d    
90.         };    
91.     },    
92.     getSourcePos: function(){    
93.         return this.getAbsolutePosition(this.masker);    
94.     },    
95.     dragSize: function(){    
96.         if (this.isDraw) {  
97.             if (!(event.srcElement.tagName.toLowerCase() == "div" && event.srcElement.className == "imgmasker"))     
98.                 return;    
99.                 
100.             var pos = this.getSourcePos();    
101.             var img_x = pos.top;     
102.             var img_y = pos.left;     
103.             var x = event.offsetX;    
104.             var y = event.offsetY;    
105.             var drawW = (x + img_x) - this.RectangleDivs[this.index].left;    
106.             var drawH = (y + img_y) - this.RectangleDivs[this.index].top;    
107.             this.currentDrawRectangle.style.width = (drawW > 0 ? drawW : -drawW) + "px";    
108.             this.currentDrawRectangle.style.height = (drawH > 0 ? drawH : -drawH) + "px";   
109.             if (drawW < 0) {    
110.                 this.currentDrawRectangle.style.left = (x + img_x) + "px";     
111.             }    
112.             if (drawH < 0) {    
113.                 this.currentDrawRectangle.style.top = (y + img_y) + "px";      
114.             }    
115.                 
116.             if (this.debug) {    
117.                 this.currentDrawRectangle.innerHTML = "<div class='innerbg'>x:" + x + ",y:" + y +    
118.                 ". img_x:" +    
119.                 img_x +    
120.                 ",img_y:" +    
121.                 img_y +    
122.                 ". drawW:" +    
123.                 drawW +    
124.                 ",drawH:" +    
125.                 drawH +    
126.                 ".  Dleft[i]:" +    
127.                 this.RectangleDivs[this.index].left +    
128.                 ",Dtop[i]:" +    
129.                this.RectangleDivs[this.index].top +    
130.                 "src:" +    
131.                 event.srcElement.tagName +    
132.                 ",this.isDraw: " + this.isDraw +  
133.                 ",this.isMouseUp: " + this.isMouseUp +  
134.                 ".</div>";    
135.             }    
136.                 
137.         }    
138.         else {    
139.             return false;    
140.         }    
141.     },    
142.         
143.     stopDraw: function(){    
144.         this.isDraw = false;    
145.     },    
146.         
147.     onMouseOut: function(){    
148.         if (!this.isMouseUp) {    
149.             this.isDraw = false;    
150.         }    
151.     },    
152.         
153.     onMouseUp: function(){    
154.         this.isDraw = false;    
155.         this.isMouseUp = true;    
156.         //this.IMG.releaseCapture();    
157.     
158.         if(this._onMouseUp) {    
159.             this._onMouseUp.call(this, this.currentDrawRectangle);    
160.         }    
161.     },    
162.         
163.     onMouseOver: function(){    
164.         if (!this.isMouseUp) {    
165.             this.isDraw = true;    
166.         }    
167.     },    
168.         
169.     getAbsolutePosition: function(obj){    
170.         var t = obj.offsetTop;    
171.         var l = obj.offsetLeft;    
172.         var w = obj.offsetWidth;    
173.         var h = obj.offsetHeight;    
174.             
175.         while (obj = obj.offsetParent) {    
176.             t += obj.offsetTop;    
177.             l += obj.offsetLeft;    
178.         }    
179.             
180.         return {    
181.             top: t,    
182.             left: l,    
183.             width: w,    
184.             height: h    
185.         };  
186.     }    
187. };   

document.getElementById：返回对拥有指定 ID 的第一个对象的引用。

document.createElement()：在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

具体例子参见网站：http://www.jb51.net/article/34740.htm

getAbsolutePosition：

1. getAbsolutePosition: function(obj){    
2.         var t = obj.offsetTop;    
3.         var l = obj.offsetLeft;    
4.         var w = obj.offsetWidth;    
5.         var h = obj.offsetHeight;    
6.             
7.         while (obj = obj.offsetParent) {    
8.             t += obj.offsetTop;    
9.             l += obj.offsetLeft;    
10.         }    
11.             
12.         return {    
13.             top: t,    
14.             left: l,    
15.             width: w,    
16.             height: h    
17.         };  
18.     }    

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 间隔上方或上层控件的地位，整型，单位像素。

obj.offsetLeft 指 obj 间隔左方或上层控件的地位，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

1.offsetTop     :

当前对象到其上级层顶部的间隔.

不克不及对其进行赋值.设置对象到页面顶部的间隔请用style.top属性.

2.offsetLeft :

当前对象到其上级层左边的间隔.

不克不及对其进行赋值.设置对象到页面左部的间隔请用style.left属性.

3.offsetWidth :

当前对象的宽度.

与style.width属性的差别在于:如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值

4.offsetHeight :

与style.height属性的差别在于:如对象的宽度设定值为百分比高度，则无论页面变大还是变小，style.height都返回此百分比，而offsetHeight则返回在不合页面中对象的高度值而不是百分比值

5.offsetParent   :

当前对象的上级层对象.

重视.若是对象是包含在一个DIV中时，此DIV不会被当做是此对象的上级层，（即对象的上级层会跳过DIV对象）上级层是Table时则不会有题目.

详见： http://blog.csdn.net/fswan/article/details/17238933

1. DrawRectangle.prototype =    

此句.prototype表示扩展类DrawRectangle。

1.  bindListener: function(){    
2.         
3.         this.masker.onmousemove = this.dragSize.bind(this);    
4.         this.masker.onmouseup = this.onMouseUp.bind(this);    
5.         this.masker.onmouseout = this.onMouseOut.bind(this);    
6.         this.masker.onmouseover = this.onMouseOver.bind(this);    
7.         this.masker.onmousedown = this.drawLayer.bind(this);    
8.         this.masker.onmouseup = this.onMouseUp.bind(this);    
9.     }

onmousemove 事件会在鼠标指针移动时发生。

onmousedown,onmouseup:首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onMouseover当鼠标经过的时候，触发 = 后面的脚本函数

onMouseout 当鼠标离开 。。

1.        var x = event.offsetX;     
2.         var y = event.offsetY;     

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

1.     d.style.overflow = "hidden";    

overflow 属性规定当内容溢出元素框时发生的事情。

hidden

内容会被修剪，并且其余内容是不可见的。

1.     d.style.opacity = 0.5; 

opacity设置 div 元素的不透明级别。

1.           
2.         d.style["z-index"] = 2; 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。