原生js实现放大镜效果

原生js实现放大镜效果

放大镜效果

1. 鼠标放上去会有半透明小框，右边有局部大图显示，为小框里的图片内容；
2. 鼠标移动小框跟着移动，右边大图也跟随移动。

放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；

放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步。

代码段

html结构样式

<div class="box">
    <img src="http://img0.imgtn.bdimg.com/it/u=3942481671,76593219&fm=26&gp=0.jpg" alt="">
    <span></span>
</div>
<div class="box2">
    <img src="http://img0.imgtn.bdimg.com/it/u=3942481671,76593219&fm=26&gp=0.jpg" alt="">
</div>

css样式

<style>
    .box,.box2{
        width: 400px;
        height: 300px;
        position: absolute;
        top: 100px;
    }
    .box{
        border: 3px solid #333;
        left: 100px;
    }

    .box span{
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(200,200,200,.5);
        display: none;
    }
    .box2 {
        border: 3px solid #333;
        left: 600px;
        display: none;
        overflow: hidden;
    }
    .box img{
        width: 400px;
        height: 300px;
    }
    .box2 img{
        width: 1200px;
        height: 900px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

js代码

这里我采用的是使用面向对象的方法实现放大镜效果。

<script>
//构造函数
    function Magnifier(options){
        this.box = options.box;
        this.box2 = options.box2;
        this.img = options.img;
        this.span = options.span;

        this.init()
    }
    //绑定事件
    Magnifier.prototype.init = function(){
        var that = this;
        this.box.onmouseover = function(){
        //span显示
            that.show()
        }
        this.box.onmouseout = function(){
        //span隐藏
            that.hide()
        }
        this.box.onmousemove = function(eve){
            var e= eve || window.event;
            //span 跟随鼠标移动
            that.move(e)
        }
    }
    Magnifier.prototype.show = function(){
    //显示，并计算span的宽高
        this.span.style.display = "block";
        this.box2.style.display = "block";
        this.span.style.width = this.box2.offsetWidth / this.img.offsetWidth * this.box.offsetWidth + "px";
        this.span.style.height = this.box2.offsetHeight / this.img.offsetHeight * this.box.offsetHeight + "px";
    }
    Magnifier.prototype.hide = function(){
    //隐藏
        this.span.style.display = "none";
        this.box2.style.display = "none";
    }
    Magnifier.prototype.move = function(e){
    //计算移动距离
        var l = e.clientX - this.box.offsetLeft - this.span.offsetWidth/2;
        var t = e.clientY - this.box.offsetTop - this.span.offsetHeight/2;
        //边界限定
        if(l<0){
            l = 0;
        }
        if(l>this.box.offsetWidth - this.span.offsetWidth){
            l = this.box.offsetWidth - this.span.offsetWidth
        }
        if(t<0){
            t = 0;
        }
        if(t>this.box.offsetHeight - this.span.offsetHeight){
            t = this.box.offsetHeight - this.span.offsetHeight;
        }
        //span 跟随鼠标移动的距离
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";
        this.img.style.left = -  this.span.offsetLeft * 3 + "px";
        this.img.style.top = - this.span.offsetTop * 3 + "px";
    }

    new Magnifier({
        box:document.querySelector(".box"),
        box2:document.querySelector(".box2"),
        img: document.querySelector(".box2 img"),
        span: document.querySelector(".box span")
    })
//此处为使鼠标移动所封装的move函数
	function move(ele,json,callback){
	    clearInterval(ele.t);
	    ele.t = setInterval(() => {
	        var onoff = true;
	        for(var i in json){
	            var iNow = parseInt(getStyle(ele,i));
	            var speed = (json[i] - iNow)/6;
	            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
	            if(iNow != json[i]){
	                onoff = false;
	            }
	            ele.style[i] = iNow + speed + "px";
	        }
	        if(onoff){
	            clearInterval(ele.t);
	            callback && callback();
	        }
	    }, 30);
	}
	function getStyle(ele,attr){
	    if(ele.currentStyle){
	        return ele.currentStyle[attr];
	    }else{
	        return getComputedStyle(ele,false)[attr];
	    }
	}

</script>