JavaScript仿京東放大鏡效果
更新時(shí)間：2021年10月27日 10:14:25 作者：今天會(huì)下雨嗎
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)京東放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
案例分析
- 整個(gè)案例可以分為三個(gè)功能模塊
- 鼠標(biāo)經(jīng)過(guò)小圖片盒子， 黃色的遮擋層 和 大圖片盒子顯示，離開(kāi)隱藏2個(gè)盒子功能
- 黃色的遮擋層跟隨鼠標(biāo)功能。
- 移動(dòng)黃色遮擋層，大圖片跟隨移動(dòng)功能。
- 鼠標(biāo)經(jīng)過(guò)小圖片盒子， 黃色的遮擋層 和 大圖片盒子顯示，離開(kāi)隱藏2個(gè)盒子功能
- 就是顯示與隱藏
- 移動(dòng)黃色遮擋層，大圖片跟隨移動(dòng)功能，大圖片的移動(dòng)距離要跟黃色遮擋層的比例相等。
- 求大圖片的移動(dòng)距離公式
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.preview_wrap {
width: 400px;
height: 400px;
}
.preview_img {
position: relative;
height: 398px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #FEDE4F;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
background-color: pink;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
/* 要給圖片加了絕對(duì)定位，才可以設(shè)置 left top */
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="preview_wrap">
<div class="preview_img">
<img src="images/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="images/big.jpg" alt="" class="bigImg">
</div>
</div>
</div>
<script>
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1. 當(dāng)我們鼠標(biāo)經(jīng)過(guò) preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 2. 鼠標(biāo)移動(dòng)的時(shí)候，讓黃色的盒子跟著鼠標(biāo)來(lái)走
preview_img.addEventListener('mousemove', function(e) {
// (1). 先計(jì)算出鼠標(biāo)在盒子內(nèi)的坐標(biāo)
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
// (2) 減去盒子高度 300的一半 是 150 就是我們mask 的最終 left 和top值了
// (3) 我們mask 移動(dòng)的距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4) 如果x 坐標(biāo)小于了0 就讓他停在0 的位置
// 遮擋層的最大移動(dòng)距離
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 3. 大圖片的移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離
// 大圖
var bigIMg = document.querySelector('.bigImg');
// 大圖片最大移動(dòng)距離
var bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大圖片的移動(dòng)距離 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigIMg.style.left = bigX + 'px';
bigIMg.style.top = bigY + 'px';
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
KnockoutJS數(shù)組比較算法實(shí)例詳解
這篇文章主要介紹了KnockoutJS數(shù)組比較算法實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
簡(jiǎn)單通過(guò)settimeout看javascript的運(yùn)行機(jī)制
這篇文章主要給大家介紹了關(guān)于如何通過(guò)settimeout看javascript的運(yùn)行機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要介紹了BootStrap中的表單大全,包括基礎(chǔ)表單，內(nèi)聯(lián)表單和水平表單等知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
javascript中強(qiáng)制執(zhí)行toString()具體實(shí)現(xiàn)
Javascript通常會(huì)根據(jù)方法或運(yùn)算符的需要而自動(dòng)把值轉(zhuǎn)成所需的類型，這可能導(dǎo)致各種錯(cuò)誤，接下來(lái)為大家介紹下javascript如何強(qiáng)制執(zhí)行toString()，感興趣的朋友可以參考下哈2013-04-04
javascript 彈出層效果代碼。需要的朋友可以測(cè)試下。2009-10-10
使用原生js實(shí)現(xiàn)頁(yè)面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法，下面有個(gè)示例，大家可以參考下2014-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript文檔注釋的相關(guān)資料,當(dāng)編寫代碼時(shí)文檔注釋是一種特殊的注釋格式,用于描述函數(shù)、類、方法或變量的功能、使用方法和參數(shù)等詳細(xì)信息,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript繼承的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
都說(shuō) JavaScript 是一種很靈活的語(yǔ)言，這其實(shí)也可以說(shuō)它是一個(gè)混亂的語(yǔ)言。它把函數(shù)式編程和面向?qū)ο缶幊挑酆弦黄?，再加上?dòng)態(tài)語(yǔ)言特性，簡(jiǎn)直強(qiáng)大無(wú)比，下面小編給大家介紹Javascript中this詳解，需要的小伙伴可以來(lái)參考下2015-09-09