原生javascript实现简陋的图片放大镜

html

<div class="pic">
    <img src="img/desk.jpg"/>
</div>

 

js

<script type="text/javascript">
        
            
            /**
             * 
             * add/delete event
             * @param dom object;
             * @param name is event type;
             * @param handler function;
             * 
             */
            function addEvent(dom,name,handler){
                
                if(document.addEventListener){
                    
                    dom.addEventListener(name, handler);
                    
                }else if(document.attachEvent){
                    
                    dom.attachEvent('on'+name,handler)
                    
                }
            }
            
            function removeEvent(dom,name,handler){
                
                if(document.addEventListener){
                    
                    dom.removeEventListener(name, handler);
                    
                }else if(document.attachEvent){
                    
                    dom.detachEvent('on'+name,handler)
                    
                }
                
            }
            
            /**
             * 
             * findByClass
             * @param className with dot or id with #; 
             * 
             */
            function findByClass(cls){
                var result,
                    get,
                    name = cls;
                
                if(document.querySelectorAll){
                    
                    result = document.querySelectorAll(name);
                
                }else if(name.indexOf('#') > -1){
                    
                    name = name.substring(1)
                    
                    result = document.getElementById(name);
                    
                }else{
                    
                    name = name.substring(1);
                    
                    get = function(cls){
                        
                        var sets = document.getElementsByTagName('*');
                        
                        var reg = new RegExp('/[^|\\s]'+cls+'[\\s|$]/','g')
                        
                        var ret = [];
                        
                        var cls_str = '';
                        for (var i = 0, len = sets.length; i < len; i++) {
                            
                            if(reg.test(sets[i].classNamer)){
                                
                                ret.push(sets[i]);
                                
                            }
                            
                        }
                        
                        return ret;
                        
                    }
                    
                    result = get(name);
                    
                }
                
                return result;
                
            }
            
            function Scale(options){
                
                this.name = options.name;
                this.zoom = options.zoom || 2;
                this.glassSize = options.glass || 100;
                this.glass = '';
                this.newimg = '';
                
            }
            
            Scale.prototype.create = function(ele,eletype){
                
                if(ele){
                    
                    return ele;
                    
                }else{
                    
                    ele = document.createElement(eletype);
                    
                }
                
                return ele;
                
            }
            
            Scale.prototype.size = function(ele){
                
                var ele = ele;
                
                function getOffset(ele){
                    
                    var offset = { x : 0, y : 0 },
                        e = ele;
                    
                    while( e.offsetParent ){
                        
                        offset.x += e.offsetLeft;
                        offset.y += e.offsetTop;

                        e = e.offsetParent;
                    }
                    
                    return offset;
                    
                }
                
                var img_W = ele.clientWidth,
                    img_H = ele.clientHeight,
                    img_X = getOffset(ele).x,
                    img_Y = getOffset(ele).y;
                
                return {
                            w: img_W,
                            h: img_H,
                            x: img_X,
                            y: img_Y
                        }
                
            }
            
            Scale.prototype.move = function(ele){
                var base = ele,//e.target
                    _self = this,//new Scale()
                    glass = _self.create(_self.glass,'div'),
                    glassimg = _self.create(_self.newimg,'img'),
                    size = _self.size(base),
                    size_y = size.y,
                    size_x = size.x,
                    size_w = size.w,
                    size_h = size.h,
                    zoom = _self.zoom,
                    glass_half = _self.glassSize/2,
                    page_x = 0,
                    page_y = 0,
                    temp = 0;
                
                glass.id = 'scale';
                
                glass.style.cssText = 'position:fixed;border:1px solid #fff;overflow:hidden;width:'
                                    + _self.glassSize + 'px;height:'
                                    + _self.glassSize + 'px';
                
                glassimg.style.cssText = 'position:absolute;width:'
                + size_w * zoom + 'px;height:' + size_h * zoom + 'px;'
                
                glassimg.src = base.src;
                
                glass.appendChild(glassimg);
                
                document.body.appendChild(glass);
                
                addEvent(document,'mousemove',moving);    
                
                function moving(e){
                    page_x = e.pageX || e.offsetX;
                    page_y = e.pageY || e.offsetY;
                    
                    //放大镜图片定位
                    glassimg.style.left = -(zoom * (page_x - size_x) - 50) + 'px';
                    glassimg.style.top = -(zoom * (page_y - size_y) - 50) + 'px';
                    
                    //边界处理
                    var fn = function(){
                        
                        if(page_y <= size_y + glass_half){
                            
                            glass.style.top = size_y+ 'px';
                        
                        }else if(page_y >= ( temp = size_y + size_h - glass_half ) ){
                            
                            glass.style.top = temp - glass_half + 'px';
                        
                        }else{
                            
                            glass.style.top = page_y - glass_half + 'px';
                            
                        }
                        
                    }
                    
                    if(page_x <= size_x + glass_half ){
                        
                        glass.style.left = size_x+ 'px';
                        
                        fn();
                        
                    }else if(page_x >= ( temp = size_x + size_w - glass_half ) ){
                        
                        glass.style.left = temp - glass_half + 'px';
                        
                        fn();
                        
                    }else{
                        
                        glass.style.left = page_x - glass_half + 'px';
                        
                        fn();
                        
                    }
                    //边界处理结束
                    
                    //鼠标滑出图片时 移除事件并删除节点
                    if( page_x > (size_x + size_w) || page_x < size_x || page_y > (size_y + size_h) || page_y < size_y ){
                        
                        removeEvent(document,'mousemove',moving);
                        
                        glass.parentNode.removeChild(glass);
                    
                    }
                    
                }
                
            }
                
            Scale.prototype.init = function(){
                
                var _self = this,
                    dom = findByClass(this.name);
                    
                for(var i = 0, len = dom.length; i < len; i++){
                    
                    (function(i){
                        
                        addEvent(dom[i],'mouseover',function(e){
                            
                            var target = e.target || e.srcElement; 
                            
                            _self.move(target)
                            
                        });
                        
                    })(i)
                    
                }
                
            }
            
            new Scale({
                name: '.pic',
                zoom: 2
            }).init()
            
        </script>

over