js實(shí)現(xiàn)鼠標(biāo)移入圖片放大效果
使用原生js編寫(xiě)一個(gè)鼠標(biāo)移入圖片放大效果,供大家參考,具體內(nèi)容如下
目標(biāo)
給圖片添加鼠標(biāo)移動(dòng)放大方法效果,移到哪里放大哪里
先看看效果是不是你想要的,再看代碼
移入前
移入后
html
<!-- css看著寫(xiě) --> ?? ?<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)移動(dòng) ?? ??? ?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è)對(duì)象 ?? ?new ScaleImg('.Box');?? ?
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 判斷各種數(shù)據(jù)類(lèi)型的簡(jiǎn)單方法(推薦)
下面小編就為大家?guī)?lái)一篇js 判斷各種數(shù)據(jù)類(lèi)型的簡(jiǎn)單方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08用javascript為頁(yè)面添加天氣顯示實(shí)現(xiàn)思路及代碼
為頁(yè)面添加天氣顯示的方法有很多,在本文為大家介紹下使用js來(lái)輕松實(shí)現(xiàn),具體的代碼如下,感興趣的朋友不要錯(cuò)過(guò)2013-12-12js document.getElementsByClassName的使用介紹與自定義函數(shù)
今天在增加一個(gè)功能的時(shí)候需要用到getElementsByClassName(),getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持,那么就需要下面的方法解決了2016-11-11動(dòng)態(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05TypeScript常見(jiàn)類(lèi)型及應(yīng)用示例講解
這篇文章主要介紹了TypeScript常見(jiàn)類(lèi)型及應(yīng)用示例講解,本章我們會(huì)講解?JavaScript?中最常見(jiàn)的一些類(lèi)型,以及對(duì)應(yīng)的描述方式,有需要的朋友可以借鑒參考下2022-02-02javascript 拖放效果實(shí)現(xiàn)代碼
JavaScript擅長(zhǎng)于修改頁(yè)面中的DOM元素,但是我們使用JavaScript通常只是實(shí)現(xiàn)一些簡(jiǎn)單功能,例如實(shí)現(xiàn)圖片的翻轉(zhuǎn),網(wǎng)頁(yè)中的標(biāo)簽頁(yè),等等。這篇文章將向你展示如何在頁(yè)面中,對(duì)創(chuàng)建的元素實(shí)現(xiàn)拖放。2010-01-01prefers-color-scheme設(shè)置檢測(cè)系統(tǒng)主題色
這篇文章主要為大家介紹了prefers-color-scheme設(shè)置檢測(cè)系統(tǒng)主題色實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04