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

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

效果图展示

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

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>

相关推荐
mCell18 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip18 小时前
Node.js 子进程:child_process
前端·javascript
excel21 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript