展示js中实现鼠标移入图片放大效果示例丨本际云推荐

展示js中实现鼠标移入图片放大效果示例

JS编写一个鼠标移入图片放大效果

本篇文章主要讲述的就是JS编写一个鼠标移入图片放大效果，目标是给图片添加鼠标移动放大方法效果，移到哪里放大哪里。

展示js中实现鼠标移入图片放大效果示例

效果展示及代码

先看看效果是不是你想要的，再看代码

代码解析

图片放大镜
@params Class 目标class string
@params Scale 放大倍数 number


function ScaleImg(Class, Scale) {
    this.Box = document.querySelector(Class);
    this.Img = this.Box.querySelector('img');
    this.scale = Scale || 3 ;
    // 盒子中心点
    this.BoxX = this.Box.offsetWidth / 2;
    this.BoxY = this.Box.offsetHeight / 2;
    // 获取盒子初始定位
    this.Left = parseFloat( this.Box.offsetLeft );
    this.Top = parseFloat( this.Box.offsetTop );
    this.Init();
}

ScaleImg.prototype = {
    // 鼠标移入
    Mouseover: function(e) {
        var e = e || window.event;
        // 放大图片
        this.Img.style.width = this.Img.offsetWidth * this.scale + "px";
        this.Img.style.height = this.Img.offsetHeight * this.scale + "px";
        // 设置放大后的图片定位
        this.Img.style.left = ( this.Box.offsetWidth - this.Img.offsetWidth ) / 2 + "px";
        this.Img.style.top = ( this.Box.offsetHeight - this.Img.offsetHeight ) / 2 + "px";
        // 获取图片放大后定位值
        this.ImgLeft = parseFloat(this.Img.style.left);
        this.ImgTop = parseFloat(this.Img.style.top);
        this.Box.left = ( this.Box.offsetWidth - this.Img.offsetWidth ) / 2;
        this.Box.top = ( this.Box.offsetHeight - this.Img.offsetHeight ) / 2;
        // 阻止默认事件
        return ;
    },
    // 鼠标移出
    Mouseout: function(e) {
        var e = e || window.event;
        // 重置css
        this.Img.style.width= this.Img.offsetWidth / this.scale + "px";
        this.Img.style.height= this.Img.offsetHeight / this.scale + "px";
        this.Img.style.left = Math.floor(( this.Box.offsetWidth - this.Img.offsetWidth ) / 2) + "px";
        this.Img.style.top = Math.floor(( this.Box.offsetHeight - this.Img.offsetHeight ) / 2) + "px";
        return ;
    },
    // 鼠标移动
    Mousemove: function(e) {
        var e = e || window.event;
        // 图片鼠标位置
        var ImgXY = {"x": this.Left + this.BoxX,"y": this.Top + this.BoxY};
        // 获取偏移量
        var left = (ImgXY.x - e.clientX ) / this.BoxX * this.ImgLeft,
        top = (ImgXY.y - e.clientY) / this.BoxY * this.ImgTop;
        this.Img.style.left = Math.floor(this.Box.left - left) + "px";
        this.Img.style.top = Math.floor(this.Box.top - top) + "px";
        return ;
    },
    // 初始化
    Init: function(e) {
        var that = this;
        this.Box.onmouseover = function(e) {
            that.Mouseover(e);
        }
        this.Box.onmouseout = function(e) {
            that.Mouseout(e);
        }
        this.Box.onmousemove = function(e) {
            that.Mousemove(e);
        }
    }
}
// 实例一个对象
new ScaleImg('.Box');