前端必学——实现电商图片放大镜效果(附代码)

放大镜可以说是前端人必须学会的程序之一,今天的案例为大家展示一下怎么实现放大镜的效果!

效果图展示

整个效果就是当鼠标放到展示图上的时候,会出现一个遮罩层以及弹出来一个框展示一个详情图,并且鼠标移动的时候详情图跟着移动,鼠标离开详情图消失。

HTML代码:

<html>

<head>

<style>

#small{

width: 500px;

height: 312px;

position: absolute;

left: 20px;

top: 20px;

}

#pic1{

position: absolute;

left: 0px;

top: 0px;

}

#pic1 img{

width: 100%;

height: 100%;

}

#big{

width: 200px;

height: 200px;

position: absolute;

left: 550px;

top: 50px;

border: 1px solid blue;

overflow: hidden;

}

#pic2{

width: 1000px;

height: 625px;

position: absolute;

left: 0;

top: 0;

}

#pic2 img{

width: 100%;

height: 100%;

}

#mask{

width: 100px;

height: 100px;

background: black;

opacity: 0.3;/*让遮罩层看起来透明*/

filter: alpha(opacity = 30);/*兼容不同的浏览器*/

position: absolute;

display: none;

}

</style>

<script>

window.onload = function(){//文档内容加载完之后再执行

//当鼠标移入小图片,显示遮罩层和放大的区域

$('small').onmouseenter = function(){

$('mask').style.display = 'block';

$('big').style.display='block';

}

//鼠标移出时,隐藏遮罩层和放大的区域

$('small').onmouseleave = function(){

$('mask').style.display='none';

$('big').style.display="none";

}

//鼠标移动

$('small').onmousemove = function(ev){

var e = ev || window.event;

//计算鼠标的位置,并让鼠标显示在遮罩层的中间

var l = e.clientX - $('small').offsetLeft - 50;

var t = e.clientY - $('small').offsetTop -50;

//别让遮罩层移出图片

if(l <= 0){

l = 0;

}

if(l >= 500 - 100){

l = 400;

}

if(t <= 0){

t = 0;

}

if(t >= 312 - 100){

t = 212;

}

//遮罩层的移动

$('mask').style.left = l + 'px';

$('mask').style.top = t + 'px';

//通过遮罩层移动,来计算出放大后图片的显示区域

("pic2").style.left = -("mask").offsetLeft * 2 + 'px';

("pic2").style.top = -("mask").offsetTop * 2 + 'px';

}

}

//为了更容容易的获取id

function $(id){

return document.getElementById(id);

}

</script>

</head>

<div id="small">

<div id="pic1">

<img src="mm.jpg" alt="">

</div>

<div id="mask"></div>

</div>

<div id="big">

<div id="pic2">

<img src="mm.jpg" alt="">

</div>

</div>

</html>

相关推荐
范文杰1 分钟前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪18 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端