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

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

效果图展示

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

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>

相关推荐
乐闻x4 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚6 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd79422 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You30 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生41 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js