首页 > 其他分享 >前端必学——实现电商图片放大镜效果(附代码)

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

时间:2023-11-24 11:06:43浏览次数:40  
标签:遮罩 style 放大镜 top 必学 mask height small 电商

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

效果图展示

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

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

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


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>

标签:遮罩,style,放大镜,top,必学,mask,height,small,电商
From: https://blog.51cto.com/u_16169955/8546052

相关文章

  • Java排序实战:如何高效实现电商产品排序
    在当今的数字化时代,电子商务已成为人们日常生活的重要组成部分。消费者可以在电商平台上浏览和购买来自全球的商品,这无疑为我们的生活带来了极大的便利。然而,随着电商平台的规模不断扩大,商品数量的急剧增加,如何对海量商品进行高效排序成为了电商系统开发的一大挑战。一、排序的重......
  • Java排序实战:如何高效实现电商产品排序
    在当今的数字化时代,电子商务已成为人们日常生活的重要组成部分。消费者可以在电商平台上浏览和购买来自全球的商品,这无疑为我们的生活带来了极大的便利。然而,随着电商平台的规模不断扩大,商品数量的急剧增加,如何对海量商品进行高效排序成为了电商系统开发的一大挑战。一、排序的重......
  • 【专题】2022年中国跨境电商行业研究报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32044近年来,我国的跨境电子商务发展迅速,在过去五年中,其贸易额增长率达到了16.2%,已经成为稳定对外贸易的一支重要力量。阅读原文,获取专题报告合集全文,解锁文末52份跨境电商行业相关报告。一方面,随着跨境电子商务的发展,跨境电子商务的监管政策得到了......
  • 关于电商应用性能指标 DTU 的评估
    DTU全称DatabaseTransactionUnit,是一种用于评估和衡量云数据库性能的指标。它最常用于关系型数据库管理系统(RDBMS),特别是在云计算环境中,如MicrosoftAzureSQLDatabase和AmazonRDS等。DTU是一个关键的性能度量标准,帮助开发者和数据库管理员了解其数据库实例的性能状况,以便更......
  • 打破内卷宿命,电商只能出海,必须出海!
    历史社会学家黄宗智把中国华北小农经济中的“过密化增长”、边际收益递减等现象称之为“内卷”:即在有限空间内的激烈零和式竞争现象;内卷产生的根源是有限且封闭的空间,竞争规则是“排他性”的零和博弈。空间有限下的零和博弈,正是当下中国电商的真实写照。我们先看下双十一的大盘数据......
  • 武汉星起航:助力创业者成功进入跨境电商领域的领军企业
    作为中国跨境电商领域的领军企业,武汉星起航电子商务有限公司凭借其专注于提供一站式解决方案的承诺,备受业界推崇。公司不仅为创业者提供入驻亚马逊平台的支持,还在产品选品、产品上架、运营管理等各个环节提供专业指导,为创业者铺平通往成功的道路,实现可持续的业务增长。武汉星起航电......
  • 武汉星起航:汽配类目具备市场优势,跨境电商的蓝海新宠
    随着电商行业的迅速发展,汽配类目作为跨境电商中的蓝海市场备受关注。究竟是什么因素让汽配成为备受青睐的新宠呢?让武汉星起航与大家一起深入探讨这一市场的特点。市场潜力巨大汽配市场一直是美国最大的消费主力之一,其产业容量高达万亿规模。在过去几年电商飞速发展的背景下,汽配是增......
  • 抖音电商的“造风”野望
    文丨新熔财经作者丨寒蝉鸣反向消费的大浪潮,不会辜负任何一个抓住风口的平台。过去是拼多多,如今是唯品会。靠着响应新时代消费者对“质价比”的需求,消失在大众视线许久的唯品会,不仅守住了电商老前辈的行业地位,更是有了几分绝地翻红的逆袭气势。不少消费者都在社交平台表示,今年双十一......
  • 跨境电商邮件营销怎么做?新品邮件发送技巧
    跨境电商在竞争激烈的市场中,邮件营销成为吸引客户眼球、推动销售的有效手段。在这个领域,如何巧妙运用邮件营销策略,特别是在新品上市时,是一个需要精心考虑的问题。1.独立站邮件营销:构建独特品牌形象独立站邮件营销是跨境电商推广的一项关键策略。通过巧妙设计的邮件,不仅可以传达产......
  • 跨境电商商家如何借助评价管理功能提升产品转化?
    网络购物的兴起让人们可以在家随性的选择喜爱的产品,但在网购时,顾客往往会依赖自身经验和产品信息内容来判断店铺产品是否值得信任,只有顾客认为值得信任时,才会最终购买产品。所以,跨境电商商家们可以借助SHOPLINE的评价管理功能来增强顾客的信任度,提升产品转化率。跨境电商商......