js仿京東放大鏡
更新時(shí)間：2022年07月03日 14:37:34 作者：阿旋要畢業(yè)~
這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js仿京東放大鏡的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)效果：
移動(dòng)遮擋框，右邊的圖片響應(yīng)的放大并移動(dòng)。
2.實(shí)現(xiàn)思路：
（1）鼠標(biāo)移動(dòng)到圖片上，遮罩層和右邊盒子顯示。鼠標(biāo)移出，遮罩層和右邊盒子消失。
（2）黃色遮罩層跟隨鼠標(biāo)移動(dòng)
（3）右邊圖片跟隨左邊圖片移動(dòng)
注意：右邊圖片的移動(dòng)方向與左邊遮罩層的移動(dòng)方向相反，因此，右邊圖片移動(dòng)距離是負(fù)的。
右邊大盒子：多余的圖片不顯示，用overflow:hidden.來(lái)隱藏
3.代碼展示
<!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>仿京東放大鏡案例</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? .preview {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? ? ? .small {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? ? ? .mask {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: rgba(199, 211, 91, 0.3);
? ? ? ? ? ? cursor: move;
? ? ? ? }
? ? ? ? .big {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top:0px;
? ? ? ? ? ? left:410px;
? ? ? ? ? ? background-color: thistle;
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? z-index: 999;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* 超過(guò)圖片的部分會(huì)隱藏 */
? ? ? ? }
? ? ? ? .bigImg {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class = "preview">
? ? ? ? <img class = "small" src="bg2.jpg" alt="">
? ? ? ? <div class="mask"></div>
? ? ? ? <div class="big"><img class = "bigImg" src="bg2.jpg" alt=""></div>
? ? </div>
? ??
? ? <script>
? ? ? ? var mask = document.querySelector('.mask');
? ? ? ??
? ? ? ? var preview = document.querySelector('.preview');
? ? ? ? var big = document.querySelector('.big');
? ? ? ? preview.addEventListener('mousemove', function(e){
? ? ? ? ? ? var x = e.pageX - this.offsetLeft;
? ? ? ? ? ? var y = e.pageY - this.offsetTop;
? ? ? ? ? ? // 找到鼠標(biāo)在盒子內(nèi)的坐標(biāo)。
? ? ? ? ? ? var new_x = x-mask.offsetWidth/2;
? ? ? ? ? ? var new_y = y - mask.offsetHeight/2;
? ? ? ? ? ? // 限制黃色盒子的坐標(biāo)。不能移動(dòng)到盒子外。最大運(yùn)動(dòng)坐標(biāo)：盒子寬（高）-遮罩層寬（高）；最小運(yùn)動(dòng)坐標(biāo)0
? ? ? ? ? ? if(new_x > this.offsetWidth - mask.offsetWidth) {
? ? ? ? ? ? ? ? new_x = this.offsetWidth - mask.offsetWidth;
? ? ? ? ? ? } else if(new_x < 0) {
? ? ? ? ? ? ? ? new_x = 0;
? ? ? ? ? ? }
? ? ? ? ? ? if(new_y > this.offsetHeight - mask.offsetHeight) {
? ? ? ? ? ? ? ? new_y = this.offsetHeight - mask.offsetHeight;
? ? ? ? ? ? } else if(new_y < 0) {
? ? ? ? ? ? ? ? new_y = 0;
? ? ? ? ? ? }
? ? ? ? ? ? mask.style.left = ?new_x+ 'px';
? ? ? ? ? ? mask.style.top = ?new_y + 'px';
? ? ? ? ? ? // 大盒子的運(yùn)動(dòng)像素，應(yīng)該按照小盒子運(yùn)動(dòng)的一定比例來(lái)運(yùn)動(dòng)。
? ? ? ? ? ? // 公式：遮擋層移動(dòng)距離 / 最大移動(dòng)距離 = 大圖片移動(dòng)距離 / 最大移動(dòng)距離
? ? ? ? ? ? // 所以：大圖片移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離。
? ? ? ? ? ? var bigImg = document.querySelector('.bigImg');
? ? ? ? ? ? var big = document.querySelector('.big');
? ? ? ? ? ? // 遮罩層最大移動(dòng)距離x
? ? ? ? ? ? var maskMax_x = this.offsetWidth - mask.offsetWidth;
? ? ? ? ? ? // 大圖片最大移動(dòng)距離x
? ? ? ? ? ? var bigMax_x = bigImg.offsetWidth - big.offsetWidth;
? ? ? ? ? ? // 大圖片的移動(dòng)距離x
? ? ? ? ? ? var bigX = new_x * bigMax_x / maskMax_x;
? ? ? ? ? ? // 遮罩層最大移動(dòng)距離y
? ? ? ? ? ? var maskMax_y = this.offsetHeight - mask.offsetHeight;
? ? ? ? ? ? // 大圖片最大移動(dòng)距離y
? ? ? ? ? ? var bigMax_y = bigImg.offsetHeight - big.offsetHeight;
? ? ? ? ? ? // 大圖片的移動(dòng)距離y
? ? ? ? ? ? var bigY = new_y * bigMax_y / maskMax_y;
? ? ? ? ? ? bigImg.style.left = ?-bigX+ 'px';
? ? ? ? ? ? bigImg.style.top = ?-bigY + 'px';
?
? ? ? ? });
? ? ? ? preview.addEventListener('mouseover', function() {
? ? ? ? ? ? big.style.display = 'block';
? ? ? ? ? ? mask.style.display = 'block';
? ? ? ? });
? ? ? ? preview.addEventListener('mouseout', function() {
? ? ? ? ? ? big.style.display = 'none';
? ? ? ? ? ? mask.style.display = 'none';
? ? ? ? });
?
? ? </script>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js模仿java的Map集合的相關(guān)資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下2016-01-01
JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法,可實(shí)現(xiàn)在底部的兩個(gè)框架中同時(shí)顯示兩個(gè)搜索引擎的搜索結(jié)果,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章給大家分享了JS中判斷字符串存在和非空的方法以及相關(guān)注意點(diǎn)總結(jié)，有興趣的朋友們參考下。2018-09-09
使用Curl命令查看請(qǐng)求響應(yīng)時(shí)間方法
curl命令查看請(qǐng)求響應(yīng)時(shí)間的方法非常簡(jiǎn)單，今天小編抽空給大家介紹下使用Curl命令查看請(qǐng)求響應(yīng)時(shí)間方法，感興趣的朋友一起看看吧2016-11-11
JavaScript瀑布流布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流布局的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript中如何計(jì)算字符串文本的寬度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
UI即User Interface（用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)2012-06-06
這篇文章主要介紹了JSONP跨域模擬百度搜索,JSONP是JSON?with?padding?的簡(jiǎn)寫,應(yīng)用JSON的一種新方法，在后來(lái)的Web服務(wù)中非常流行，JSONP看起來(lái)與JSON差不多，只不過(guò)是被包含在函數(shù)中調(diào)用的JSON,對(duì)此感興趣的小伙伴可以參考一下下面文章內(nèi)容2021-12-12
JavaScript事件概念詳解(區(qū)分靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè))
這篇文章主要介紹了JavaScript事件(區(qū)分靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè))的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-02-02