小图看大图-CSDN博客

本文链接：https://blog.csdn.net/u011551941/article/details/50608796
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{
                margin:0;
                padding:0;
            }
            div{
                float:left;
            }
            .box{
                background: rgba(0,0,0,0.5);
                width:200px;
                height:200px;
                position: absolute;
                display: none;
                top:0;
                left:0;
            }
            .big{
                position: relative;
                overflow:hidden;
                width:400px;
                height:400px;
                display: none;
            }
            .samll{
                width:400px;
                height:400px;
                position: relative;
                cursor:move;
                overflow: hidden;
            }
            #big{
                position: absolute;
                top: 0;
                left:0;
            }
        </style>
    </head>
    <body style="overflow:hidden">
        <div style="margin:100px 200px">
            <div class="samll">
                <img src="small.jpg" alt="" />
            </div>
            <div class="big">
                <img src="big.jpg" id="big" alt="" />
            </div>
        </div>
    </body>
    <script src="public.js"></script>
    <script>
        !(function(doc,undefined){
           
            function move(small,big,much){
                // if(!this instanceof move)return new move(small,big,much);
                this.samll=Object.prototype.toString.call(small).slice(8,-1).toLowerCase()=="string"?flt.getClass(document,small)[0]:!1;
                this.simg=this.samll?this.samll.getElementsByTagName("img")[0]:!1;
                this.big=Object.prototype.toString.call(big).slice(8,-1).toLowerCase()=="string"?flt.getClass(document,big)[0]:!1;
                this.bimg=this.big?this.big.getElementsByTagName("img")[0]:!1;
                this.much=much;
                this.init();
            }
            move.prototype={
                constructor:this,
                init:function(){
                    var _this=this.samll,
                        _that=this;
                    _this.οnmοuseenter=function(e){
                        _that.seen(e);
                        return false;
                    }
                },
                seen:function(e){   
                    var events=e||window.event,
                        x=events.pageX,
                        y=events.pageY,
                        that=this;
                    this.box=document.createElement("div");
                    this.box.className="box";
                    this.box.style.display="block";
                    box_x=x-(this.box.offsetWidth/2)-this.samll.offsetLeft;
                    box_y=y-(this.box.offsetHeight/2)-this.samll.offsetTop;
                    this.samll.appendChild(this.box);
                    if(box_x<0){
                        this.box.style.left=0;
                    }else if(box_x>this.samll.offsetWidth-this.box.offsetWidth){
                        this.box.style.left=this.samll.offsetWidth-this.box.offsetWidth+"px";
                    }

                    if(box_y<0){
                        this.box.style.top=0;
                    }else if(box_y>this.samll.offsetHeight-this.box.offsetHeight){
                        this.box.style.top=this.samll.offsetHeight-this.box.offsetHeight+"px";
                    }
                    this.big.style.display="block";
                    this.samll.οnmοusemοve=function(e){
                        that.mover(e);
                    }
                    this.samll.οnmοuseleave=function(){
                        that.leave();
                    }
                },
                mover:function(e){
                    var events=e||window.event,
                        mx=events.pageX,
                        my=events.pageY;
                        box_mx=mx-(this.box.offsetWidth/2)-this.samll.offsetLeft;
                        box_my=my-(this.box.offsetHeight/2)-this.samll.offsetTop;
                     
                        this.box.style.left=box_mx+"px";
                        this.box.style.top=box_my+"px"; 
                        this.bimg.style.left=-(box_mx*this.much)+"px";
                        this.bimg.style.top=-(box_my*this.much)+"px";
                        if((box_mx)<0){
                            this.box.style.left=this.bimg.style.left=0;

                        }else if(box_mx>this.offsetWidth-this.box.offsetWidth){
                            this.box.style.left=this.offsetWidth-this.box.offsetWidth+"px";
                            this.bimg.style.left=-(this.bimg.offsetWidth-this.big.offsetWidth)+"px";
                        }
                        if(box_my<0){
                            this.box.style.top=this.bimg.style.top=0;
                        }else if(box_my>this.offsetHeight-this.box.offsetHeight){
                            this.box.style.top=this.offsetHeight-this.box.offsetHeight+"px";
                            this.bimg.style.top=-(this.bimg.offsetHeight-this.big.offsetHeight)+"px";
                        }
                       
                },
                leave:function(){
                    this.box.style.display="none";
                    this.big.style.display="none";
                    this.samll.removeChild(this.box);
                }
            }
            new move("samll","big",2);
        })(document)
    </script>
</html>