js实现鼠标移入图片放大效果

使用原生js编写一个鼠标移入图片放大效果，供大家参考，具体内容如下
目标

给图片添加鼠标移动放大方法效果，移到哪里放大哪里
先看看效果是不是你想要的，再看代码
移入前

移入后

html

1. <!-- css看着写 -->
2. <div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidden;">
3.   <Img src="../image/lingtai.jpg" alt="" style="width:200px;height:200px;position:absolute;left:0;top:0;">
4. </div>

复制代码

javascript

1. // 图片放大镜
2. // @params Class 目标class string
3. // @params Scale 放大倍数 number
4. function ScaleImg(Class, Scale){
6.   this.Box = document.querySelector(Class);
8.   this.Img = this.Box.querySelector('img');
10.   this.scale = Scale || 3 ;
12.   // 盒子中心点
13.   this.BoxX = this.Box.offsetWidth / 2;
14.   this.BoxY = this.Box.offsetHeight / 2;
16.   // 获取盒子初始定位
17.   this.Left = parseFloat( this.Box.offsetLeft );
18.   this.Top = parseFloat(this.Box.offsetTop );
20.   this.Init();
22. }
24. ScaleImg.prototype = {
26.   // 鼠标移入
27.   Mouseover: function(e){
29.    var e = e || window.event;
31.    / 放大图片
32.    this.Img.style.width = this.Img.offsetWidth * this.scale + "px";
33.    this.Img.style.height = this.Img.offsetHeight * this.scale + "px";
35.    // 设置放大后的图片定位
36.    this.Img.style.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2 + "px";
37.    this.Img.style.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2 + "px";
39.    // 获取图片放大后定位值
40.    this.ImgLeft = parseFloat(this.Img.style.left);
41.    this.ImgTop = parseFloat(this.Img.style.top);
43.    this.Box.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2;
44.    this.Box.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2;
46.    // 阻止默认事件
47.    return ;
49.   },
51.   // 鼠标移除
52.   Mouseout: function(e){
54.    var e = e || window.event;
56.    // 重置css
57.    this.Img.style.width = this.Img.offsetWidth / this.scale + "px";
58.    this.Img.style.height =this.Img.offsetHeight / this.scale + "px";
60.    this.Img.style.left = Math.floor((this.Box.offsetWidth - this.Img.offsetWidth) / 2) + "px";
61.    this.Img.style.top = Math.floor((this.Box.offsetHeight - this.Img.offsetHeight) / 2) + "px";
63.    return ;
64.   },
66.   // 鼠标移动
67.   Mousemove: function(e){
69.    var e = e || window.event;
71.    // 图片鼠标位置
72.    var ImgXY = {"x": this.Left + this.BoxX, "y": this.Top + this.BoxY};
74.    // 获取偏移量
75.    var left = (ImgXY.x - e.clientX ) / this.BoxX * this.ImgLeft ,
76.     top = (ImgXY.y - e.clientY) / this.BoxY * this.ImgTop ;
78.    this.Img.style.left = Math.floor(this.Box.left - left) + "px";
79.    this.Img.style.top = Math.floor(this.Box.top - top) + "px";
81.    return ;
82.   },
84.   // 初始化
85.   Init: function(e){
87.    var that = this;
89.    this.Box.onmouseover = function(e){
90.     that.Mouseover(e);
91.    }
92.    this.Box.onmouseout = function(e){
93.     that.Mouseout(e);
94.    }
95.    this.Box.onmousemove = function(e){
96.     that.Mousemove(e);
97.    }
99.   }
100. }
102. // 实例一个对象
103. new ScaleImg('.Box');

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。