展示js中實現鼠標移入圖片放大效果示例

3403771864 發布于2022-10-18 22:38 / 718人閱讀

　　本篇文章主要講述的就是JS編寫一個鼠標移入圖片放大效果，不多說廢話，大家一起看看具體內容：

　　目標

　　給圖片添加鼠標移動放大方法效果，移到哪里放大哪里

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

　　移入前

　　移入后

　　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 目標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');

　　全部內容已講述完畢，歡迎大家多多學習。

GPU云服務器云服務器圖片放大縮小效果js js圖片變焦放大效果 js中實現歷史記錄 js移入鼠標樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128140.html

js放大鏡效果

效果如淘寶、京東這些電商購物時，查看圖片的放大效果。思路：先把右邊的大圖和左邊小圖里面的方塊隱藏當鼠標移入左邊的smallPic，顯示其里面的小方塊和右邊的bigPic 當鼠標移動里面的小方塊，右邊的bigPic顯示圖片對應的位置小方塊移動的范圍在其父級smallPic的范圍內當鼠標smallPic后，bigPic和smallPic里面的小方塊隱藏用到的方法主要由定位、溢出隱藏、事件...

Joonas 2019-08-20 17:03 評論0 收藏0
js放大鏡效果

效果如淘寶、京東這些電商購物時，查看圖片的放大效果。思路：先把右邊的大圖和左邊小圖里面的方塊隱藏當鼠標移入左邊的smallPic，顯示其里面的小方塊和右邊的bigPic 當鼠標移動里面的小方塊，右邊的bigPic顯示圖片對應的位置小方塊移動的范圍在其父級smallPic的范圍內當鼠標smallPic后，bigPic和smallPic里面的小方塊隱藏用到的方法主要由定位、溢出隱藏、事件...

趙連江 2019-08-29 12:44 評論0 收藏0
js放大鏡效果

效果如淘寶、京東這些電商購物時，查看圖片的放大效果。思路：先把右邊的大圖和左邊小圖里面的方塊隱藏當鼠標移入左邊的smallPic，顯示其里面的小方塊和右邊的bigPic 當鼠標移動里面的小方塊，右邊的bigPic顯示圖片對應的位置小方塊移動的范圍在其父級smallPic的范圍內當鼠標smallPic后，bigPic和smallPic里面的小方塊隱藏用到的方法主要由定位、溢出隱藏、事件...

DDreach 2019-08-01 16:57 評論0 收藏0
使用原生js實現輪播圖效果

摘要：知乎原文我的博客微信公眾號這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生寫了一個輪播圖效果，希望大家喜歡。知乎原文我的博客微信公眾號這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。這是我發布在github上的最后實現的效果：https://heternally.gith...

happen 2019-08-02 15:57 評論0 收藏0
使用原生js實現輪播圖效果

摘要：知乎原文我的博客微信公眾號這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生寫了一個輪播圖效果，希望大家喜歡。知乎原文我的博客微信公眾號這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。這是我發布在github上的最后實現的效果：https://heternally.gith...

Anshiii 2019-08-21 11:49 評論0 收藏0