js實(shí)現(xiàn)圖片局部放大鏡效果的示例代碼
更新時(shí)間：2023年12月06日 11:40:10 作者：杰森斯坦李
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
js實(shí)現(xiàn)放大鏡，先來看效果
鼠標(biāo)移動(dòng)到左側(cè)區(qū)域，右側(cè)區(qū)域放大圖片對(duì)應(yīng)的位置
首先來看html部分，一共由3個(gè)div組成
<!-- 圖片盒子 -->
<div class="box">
<!-- 放大鏡 -->
<div class="area"></div>
</div>
<!-- 放大后的區(qū)域 -->
<div class="zoom-content"></div>
下面來編寫一下css
.box{
display: inline-block;
position: relative;
width:400px;
height:400px;
border:1px solid red;
background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
background-size: 100% 100%;
vertical-align: top;
}
.area{
position: absolute;
width:200px;
height:200px;
background-color: rgba(0, 0, 255,.5);
cursor: move;
}
.zoom-content{
display: inline-block;
width:500px;
height:500px;
border:1px solid red;
background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
background-repeat: no-repeat;
}
編寫完成后如圖
下面開始js邏輯部分
1.我們首先開始實(shí)現(xiàn)第一個(gè)功能，鼠標(biāo)移入框內(nèi)后，讓藍(lán)色的盒子（放大鏡）跟著鼠標(biāo)移動(dòng)
// 先獲取DOM元素
let area = document.querySelector('.area'); // 放大鏡
let box = document.querySelector('.box'); // 圖片盒子
let zoom = document.querySelector('.zoom-content'); //右側(cè)放大區(qū)域
// 放大鏡藍(lán)色背景盒子尺寸
let areaWidth = area.clientWidth;
let areaHeight = area.clientHeight;
// 鼠標(biāo)移入后的事件
const enter = (event) => {
// 設(shè)置放大鏡的位置
setAreaPosition(event);
box.addEventListener("mousemove",move);
box.addEventListener("mouseleave",leave);
}
// 鼠標(biāo)移動(dòng)事件
const move = (event) => {
setAreaPosition(event);
}
//鼠標(biāo)移出后 取消綁定一下
const leave = () => {
box.removeEventListener("mousemove",move);
box.removeEventListener("mouseleave",leave);
}
// 設(shè)置放大鏡的位置
const setAreaPosition = (event) => {
// 讓放大鏡垂直居中顯示在鼠標(biāo)移動(dòng)后的位置 需減去自身方向的一半
let x = event.x - areaWidth / 2;
let y = event.y - areaHeight / 2;
area.style.left = x+"px";
area.style.top = y+"px";
}
box.addEventListener("mouseenter",enter);
這樣就能讓放大鏡跟隨鼠標(biāo)移動(dòng)了，但是有點(diǎn)瑕疵，需要讓放大鏡一直保持在盒子里面，需要判斷一下距離邊界情況
// 圖片盒子大小尺寸
let boxWidth = box.clientWidth;
let boxHeight = box.clientHeight;
// 放大鏡X軸極限距離
let maxX = boxWidth - areaWidth;
// 放大鏡Y軸極限距離
let maxY = boxHeight - areaHeight;
maxX，maxY就是邊界的距離，我們需要在setAreaPosition函數(shù)中，對(duì)x軸，y軸的大小做一下限制
const setAreaPosition = (event) => {
// 讓放大鏡垂直居中顯示在鼠標(biāo)移動(dòng)后的位置 需減去自身方向的一半
let x = event.x - areaWidth / 2;
let y = event.y - areaHeight / 2;
// x的值不能大于maxX,同時(shí)不能小于0，y的判斷同理
x = Math.min(maxX,Math.max(0,x));
// y的值不能大于maxY,同時(shí)不能小于0
y = Math.min(maxY,Math.max(0,y));
area.style.left = x+"px";
area.style.top = y+"px";
}
通過Math.min方法和Math.max方法就能對(duì)x,y極限值做限制了
下面我們來設(shè)置一下右側(cè)放大區(qū)域，目前來看它并沒有放大，而是保持了圖片本來的大小，下面是js部分
// 先獲取一下縮放的倍率，也就是放大鏡和圖片盒子做對(duì)比
// 縮放倍率
let xScale = boxWidth / areaWidth;
let yScale = boxHeight / areaHeight;
// 知道了倍率后，我們對(duì)放大區(qū)域的圖片大小做一下設(shè)置
// 因?yàn)槭褂玫氖潜尘皥D片所以需設(shè)置一下backgroundSize屬性
zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;
這一部分呢可以理解為把右側(cè)的放大區(qū)域(.zoom-content)看作是放大鏡(.area);
下面只差最后一部分了，移動(dòng)鼠標(biāo)，讓右側(cè)放大區(qū)域改變，只需要改變(.zoom-content)的backgroundPosition即可
那的backgroundPosition的值怎么計(jì)算呢？
綠色背景假設(shè)為圖片，左側(cè)的藍(lán)色是放大鏡，右側(cè)的藍(lán)色是放大后的區(qū)域，這樣就一目了然了，先算出放大鏡距離圖片盒子的多少比例，然后在拿這個(gè)比例去算出占放大后的背景多少像素就可以了
// 縮放后的圖片尺寸
let bgWidth = zoom.clientWidth * xScale;
let bgHeight = zoom.clientHeight * yScale;
setAreaPosition函數(shù)修改一下
// 設(shè)置放大鏡的位置
const setAreaPosition = (event) => {
let x = event.x - areaWidth / 2;
let y = event.y - areaHeight / 2;
// x的值不能大于maxX,同時(shí)不能小于0，y的判斷同理
x = Math.min(maxX,Math.max(0,x));
// y的值不能大于maxY,同時(shí)不能小于0
y = Math.min(maxY,Math.max(0,y));
area.style.left = x+"px";
area.style.top = y+"px";
// 計(jì)算背景距離，為什么為負(fù)數(shù)，負(fù)數(shù)圖片為往右走，正數(shù)為左走
// x / boxWidth 放大鏡距離左側(cè)的比例，根據(jù)這個(gè)比例 * 相應(yīng)的圖片寬度，就知道圖片要走到哪里了
zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
}
后續(xù)可以在移入和移出時(shí)改變(.area)放大鏡的visibility就行
// enter 移入 area.style.visibility = 'visible'; // leave 移出 area.style.visibility = 'hidden';
完整代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: inline-block;
position: relative;
width:400px;
height:400px;
border:1px solid red;
background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
background-size: 100% 100%;
vertical-align: top;
}
.area{
position: absolute;
width:200px;
height:200px;
background-color: rgba(0, 0, 255,.5);
visibility: hidden;
cursor: move;
}
.zoom-content{
display: inline-block;
width:500px;
height:500px;
border:1px solid red;
background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box">
<div class="area"></div>
</div>
<div class="zoom-content"></div>
<script>
// 獲取DOM元素
let area = document.querySelector('.area');
let box = document.querySelector('.box');
let zoom = document.querySelector('.zoom-content');
// 藍(lán)色背景盒子尺寸
let areaWidth = area.clientWidth;
let areaHeight = area.clientHeight;
// 圖片盒子大小尺寸
let boxWidth = box.clientWidth;
let boxHeight = box.clientHeight;
// 藍(lán)色盒子X軸極限距離
let maxX = boxWidth - areaWidth;
// 藍(lán)色盒子Y軸極限距離
let maxY = boxHeight - areaHeight;
// 縮放倍率
let xScale = boxWidth / areaWidth;
let yScale = boxHeight / areaHeight;
// 縮放后的圖片尺寸
let bgWidth = zoom.clientWidth * xScale;
let bgHeight = zoom.clientHeight * yScale;
zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;
const enter = (event) => {
area.style.visibility = 'visible';
setAreaPosition(event);
box.addEventListener("mousemove",move);
box.addEventListener("mouseleave",leave);
}
const leave = () => {
area.style.visibility = 'hidden';
box.removeEventListener("mousemove",move);
box.removeEventListener("mouseleave",leave);
}
const setAreaPosition = (event) => {
let x = event.x - areaWidth / 2;
let y = event.y - areaHeight / 2;
x = Math.min(maxX,Math.max(0,x));
y = Math.min(maxY,Math.max(0,y));
area.style.left = x+"px";
area.style.top = y+"px";
zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
}
const move = (event) => {
setAreaPosition(event);
}
box.addEventListener("mouseenter",enter)
</script>
</body>
</html>
以上就是js實(shí)現(xiàn)圖片局部放大鏡效果的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于js圖片局部放大鏡的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript實(shí)現(xiàn)快速排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)快速排序的方法,實(shí)例分析了javascript快速排序的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Javascript檢查圖片大小不要讓大圖片撐破頁(yè)面
用Javascript判斷圖片大小，其實(shí)只要寫一個(gè)簡(jiǎn)單的函數(shù)就可以了，使用其他語(yǔ)言進(jìn)行判斷，過程比較復(fù)雜，用 Javascript 判斷輕松搞定2014-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)右鍵菜單功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
js正則表達(dá)式中test,exec,match方法的區(qū)別說明
本篇文章主要是對(duì)js正則表達(dá)式中test,exec,match方法的區(qū)別進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
Bootstrap每天必學(xué)之警告框插件,使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能，感興趣的小伙伴們可以參考一下2016-04-04
小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)右鍵彈出自定義菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了js css3實(shí)現(xiàn)圖片拖拽效果，注釋非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記9)
這篇文章主要介紹了談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記9)的相關(guān)資料,需要的朋友可以參考下2015-12-12
在頁(yè)面上，用戶會(huì)有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問題，我們應(yīng)如何去展示不同的結(jié)果呢？2009-12-12