js實(shí)現(xiàn)鼠標(biāo)移入圖片放大效果

更新時(shí)間：2022年07月13日 08:27:40 作者：checkMa

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入圖片放大效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用原生js編寫一個(gè)鼠標(biāo)移入圖片放大效果，供大家參考，具體內(nèi)容如下

目標(biāo)

給圖片添加鼠標(biāo)移動放大方法效果，移到哪里放大哪里

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

移入前

移入后

html

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

javascript

// 圖片放大鏡
// @params Class 目標(biāo)class string
// @params Scale 放大倍數(shù) number
function ScaleImg(Class, Scale){
?? ??? ?
?? ??? ?this.Box = document.querySelector(Class);
?? ?
?? ??? ?this.Img = this.Box.querySelector('img');
?? ??? ?
?? ??? ?this.scale = Scale || 3 ;
?? ?
?? ??? ?// 盒子中心點(diǎn)
?? ??? ?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 = {
?? ?
?? ??? ?// 鼠標(biāo)移入
?? ??? ?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";
?? ?
?? ??? ??? ?// 設(shè)置放大后的圖片定位
?? ??? ??? ?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;
?? ??? ??? ?
?? ??? ??? ?// 阻止默認(rèn)事件
?? ??? ??? ?return ;
?? ?
?? ??? ?},
?? ?
?? ??? ?// 鼠標(biāo)移除
?? ??? ?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 ?;
?? ??? ?},
?? ?
?? ??? ?// 鼠標(biāo)移動
?? ??? ?Mousemove: function(e){
?? ?
?? ??? ??? ?var e = e || window.event;
?? ?
?? ??? ??? ?// 圖片鼠標(biāo)位置
?? ??? ??? ?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);
?? ??? ??? ?}
?? ?
?? ??? ?}
?? ?}
?? ?
?? ?// 實(shí)例一個(gè)對象
?? ?new ScaleImg('.Box');?? ?

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: