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

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

效果图展示

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

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 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding4 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui