javascript学习(一）

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

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

Javascript代码：

DrawRectangle = function(id, onMouseUp, className){    

      

    document.oncontextmenu=function() {    

       return true;    

    };  

          

    this.IMG = document.getElementById(id);    

      

    var masker = document.createElement("div");  

    masker.id = "mask_" + id;  

    var position = this.getAbsolutePosition(this.IMG);  

      

    masker.style.width = position.width + "px";  

    masker.style.height = position.height + "px";  

    masker.style.left = position.left;  

    masker.style.top = position.top;  

    masker.style["background-image"] = "url("+this.IMG.src+")";  

    masker.className = "imgmasker";  

  

    this.masker = masker;  

    this.IMG.parentNode.appendChild(masker);  

    this.IMG.parentNode.removeChild(this.IMG);  

      

    this.isDraw = false;    

    this.isMouseUp = true;    

    this.index = 0;    

    this.currentDrawRectangle = null;    

    this.className = className;    

        

    this.RectangleDivs = [];    

        

    this.debug = true;    

    

    this._onMouseUp = onMouseUp;    

        

    this.bindListener();    

};  

    

DrawRectangle.prototype = {    

    bindListener: function(){    

        

        this.masker.onmousemove = this.dragSize.bind(this);    

        this.masker.onmouseup = this.onMouseUp.bind(this);    

        this.masker.onmouseout = this.onMouseOut.bind(this);    

        this.masker.onmouseover = this.onMouseOver.bind(this);    

        this.masker.onmousedown = this.drawLayer.bind(this);    

        this.masker.onmouseup = this.onMouseUp.bind(this);    

    },    

    drawLayer: function(){    

        //this.IMG.setCapture(true);    

        this.isDraw = true;    

        this.ismouseup = false;    

        this.index++;    

            

        var pos = this.getSourcePos();    

            

        var x = event.offsetX;     

        var y = event.offsetY;     

    

        var top = y + pos.top - 2;    

        var left = x + pos.left - 2;    

           

        var d = document.createElement("div");    

       // document.body.appendChild(d);  

        this.masker.appendChild(d);  

        d.style.border = "1px solid #ff0000";  
1b024
  

        d.style.width = 0;    

        d.style.height = 0;    

        d.style.overflow = "hidden";    

        d.style.position = "absolute";    

        d.style.left = left + "px";  

        d.style.top = top + "px";   

        d.style.opacity = 0.5;  

          

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

        if(this.className) {    

            d.className = this.className;    

        }    

        d.id = "draw" + this.index;    

        if (this.debug) {    

            d.innerHTML = "<div class='innerbg'>x:" + x + ",y:" + y + "..</div>";    

        }    

            

        this.currentDrawRectangle = d;    

            

        this.RectangleDivs[this.index] = {    

            left: left,    

            top: top,    

            el: d    

        };    

    },    

    getSourcePos: function(){    

        return this.getAbsolutePosition(this.masker);    

    },    

    dragSize: function(){    

        if (this.isDraw) {  

            if (!(event.srcElement.tagName.toLowerCase() == "div" && event.srcElement.className == "imgmasker"))     

                return;    

                

            var pos = this.getSourcePos();    

            var img_x = pos.top;     

            var img_y = pos.left;     

            var x = event.offsetX;    

            var y = event.offsetY;    

            var drawW = (x + img_x) - this.RectangleDivs[this.index].left;    

            var drawH = (y + img_y) - this.RectangleDivs[this.index].top;    

            this.currentDrawRectangle.style.width = (drawW > 0 ? drawW : -drawW) + "px";    

            this.currentDrawRectangle.style.height = (drawH > 0 ? drawH : -drawH) + "px";   

            if (drawW < 0) {    

                this.currentDrawRectangle.style.left = (x + img_x) + "px";     

            }    

            if (drawH < 0) {    

                this.currentDrawRectangle.style.top = (y + img_y) + "px";      

            }    

                

            if (this.debug) {    

                this.currentDrawRectangle.innerHTML = "<div class='innerbg'>x:" + x + ",y:" + y +    

                ". img_x:" +    

                img_x +    

                ",img_y:" +    

                img_y +    

                ". drawW:" +    

                drawW +    

                ",drawH:" +    

                drawH +    

                ".  Dleft[i]:" +    

                this.RectangleDivs[this.index].left +    

                ",Dtop[i]:" +    

               this.RectangleDivs[this.index].top +    

                "src:" +    

                event.srcElement.tagName +    

                ",this.isDraw: " + this.isDraw +  

                ",this.isMouseUp: " + this.isMouseUp +  

                ".</div>";    

            }    

                

        }    

        else {    

            return false;    

        }    

    },    

        

    stopDraw: function(){    

        this.isDraw = false;    

    },    

        

    onMouseOut: function(){    

        if (!this.isMouseUp) {    

            this.isDraw = false;    

        }    

    },    

        

    onMouseUp: function(){    

        this.isDraw = false;    

        this.isMouseUp = true;    

        //this.IMG.releaseCapture();    

    

        if(this._onMouseUp) {    

            this._onMouseUp.call(this, this.currentDrawRectangle);    

        }    

    },    

        

    onMouseOver: function(){    

        if (!this.isMouseUp) {    

            this.isDraw = true;    

        }    

    },    

        

    getAbsolutePosition: function(obj){    

        var t = obj.offsetTop;    

        var l = obj.offsetLeft;    

        var w = obj.offsetWidth;    

        var h = obj.offsetHeight;    

            

        while (obj = obj.offsetParent) {    

            t += obj.offsetTop;    

            l += obj.offsetLeft;    

        }    

            

        return {    

            top: t,    

            left: l,    

            width: w,    

            height: h    

        };  

    }    

};   

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

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

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

getAbsolutePosition：

getAbsolutePosition: function(obj){    

        var t = obj.offsetTop;    

        var l = obj.offsetLeft;    

        var w = obj.offsetWidth;    

        var h = obj.offsetHeight;    

            

        while (obj = obj.offsetParent) {    

            t += obj.offsetTop;    

            l += obj.offsetLeft;    

        }    

            

        return {    

            top: t,    

            left: l,    

            width: w,    

            height: h    

        };  

    }    



假设 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

DrawRectangle.prototype =    

此句.prototype表示扩展类DrawRectangle。

 bindListener: function(){    

        

        this.masker.onmousemove = this.dragSize.bind(this);    

        this.masker.onmouseup = this.onMouseUp.bind(this);    

        this.masker.onmouseout = this.onMouseOut.bind(this);    

        this.masker.onmouseover = this.onMouseOver.bind(this);    

        this.masker.onmousedown = this.drawLayer.bind(this);    

        this.masker.onmouseup = this.onMouseUp.bind(this);    

    }

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

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

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

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

onMouseout 当鼠标离开 。。

       var x = event.offsetX;     

        var y = event.offsetY;     

event.offsetX、event.offsetY

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



    d.style.overflow = "hidden";
   
overflow 属性规定当内容溢出元素框时发生的事情。

hidden

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

    d.style.opacity = 0.5; 

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

          

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

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