js京东图片放大镜效果。
Posted akangwx0624
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js京东图片放大镜效果。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*
margin: 0;
padding: 0;
/* 去除图片的3px */
img
vertical-align: top;
/* 容器样式 */
.container
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
/* 鼠标盒子样式 */
.mouse
position: relative;
/* 大鼠标盒子样式 */
.mouseBigSize
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 370px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
/* 大鼠标盒子里面图片样式 */
.mouseBigSize img
position: absolute;
top: 0;
left: 0;
/* 遮罩层样式 */
.mask
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
</style>
</head>
<body>
<div class="container">
<!-- 小鼠标 -->
<div class="mouse">
<img src="./images/mouse.jpg" >
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
<!-- 大鼠标 -->
<div class="mouseBigSize">
<img src="./images/mouseBigSize.jpg" >
</div>
</div>
<script>
// 获取DOM元素
let container = document.getElementsByClassName("container")[0]; // 获得最大的盒子
let mouse = document.getElementsByClassName("mouse")[0]; // 获取小鼠标盒子
let mouseBigSize = document.getElementsByClassName("mouseBigSize")[0]; // 获取大鼠标盒子
let bigImg = mouseBigSize.children[0]; // 获取大盒子里面的图片
let mask = document.getElementsByClassName("mask")[0]; // 获取遮罩层
// 给小盒子添加mouseover事件
mouse.onmouseover = function()
mask.style.display = "block";
mouseBigSize.style.display = "block";
// 给小盒子添加mouseout事件
mouse.onmouseout = function()
mask.style.display = "none";
mouseBigSize.style.display = "none";
// 初始化x轴和y轴
let x = 0,y = 0;
// 给小盒子添加mousemove事件
mouse.onmousemove = function(event)
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
// 进行边界判断
if(x < 0)
x = 0;
if(x > mouse.offsetWidth - mask.offsetWidth)
x = mouse.offsetWidth - mask.offsetWidth;
if(y < 0)
y = 0;
if(y > mouse.offsetHeight - mask.offsetHeight)
y = mouse.offsetHeight - mask.offsetHeight;
// 重新给遮罩层的left和top赋值
mask.style.left = x + "px";
mask.style.top = y + "px";
/*
计算：弟弟一顿吃2个馒头，哥哥一顿吃4个馒头，问：弟弟今天吃了3个馒头，哥哥应该吃几个馒头？
计算出他们的倍数 4 / 2 2倍
3 * 2 == 6个
*/
/*
大图盒子 / 小图盒子 = 倍数
我们 再小图移动的距离 * 倍数 == 大图的位置
*/
bigImg.style.left = -x * mouseBigSize.offsetWidth / mouse.offsetWidth + "px";
bigImg.style.top = -y * mouseBigSize.offsetHeight / mouse.offsetHeight + "px";
</script>
</body>
</html>
以上是关于js京东图片放大镜效果。的主要内容，如果未能解决你的问题，请参考以下文章