面象对象(一)

 /**
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                var disX = 0;
                var disY = 0;
                oDiv.onmousedown = function(ev) {
                    var ev = ev || window.event;
                    disX = (ev.clientX + document.documentElement.scrollLeft||document.body.scrollLeft) - oDiv.offsetLeft;
                    disY = (ev.clientY + document.documentElement.scrollTop||document.body.scrollTop) - oDiv.offsetTop;
                    document.onmousemove = function(ev) {
                        var ev = ev || window.event;
                        oDiv.style.left = ev.clientX - disX + 'px';
                        oDiv.style.top = ev.clientY - disY + 'px';
                    };
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                    return false;
                };
            };**/
            /*  面向对象注意事项1:this的指向永远指向对象Drag属性
             *            2:事件对象指向是否指向对应方法
             *            3:函数嵌套函数要分离
             *            4:对象里面写属性
             *            5:prototype写方法
             *            6:有初始化init();
             *            7:在window.onload new对象             
             * 
             * */
            
            
            window.onload=function(){
                var drag=new Drag('div1');
                drag.init();
            }
            
            function Drag(id){
                this.oDiv = document.getElementById(id);
                this.disX = 0;
                this.disY = 0;
            }
            
            Drag.prototype.init=function(){
                var This=this;
                this.oDiv.onmousedown=function(ev){
                    var ev = ev || window.event;
                    This.fnDown(ev);
                    return false;
                };
            }
            
            Drag.prototype.fnDown=function(ev){
                var ev = ev || window.event;
                var This=this;
                this.disX = ev.clientX - this.oDiv.offsetLeft;
                this.disY = ev.clientY - this.oDiv.offsetTop;
                document.onmousemove=function(ev){
                    var ev = ev || window.event;
                    This.fnMove(ev);
                };
                document.onmouseup=function(){
                    This.fnUp();
                };
            };
            
            Drag.prototype.fnMove=function(ev){
                this.oDiv.style.left = ev.clientX - this.disX + 'px';
                this.oDiv.style.top = ev.clientY - this.disY + 'px';
            };
            
            Drag.prototype.fnUp=function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
            

 

posted @ 2015-08-04 15:55  Mi文  阅读(109)  评论(0编辑  收藏  举报