仿淘宝的放大镜效果

头像
wuming
    阅读 6 分钟
    12

    前言

    这一段时间事情挺多的，一直没有时间写文章。这两天稍微闲了一些，就趁这会闲工夫写一篇文章。本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单，下面我们学习一下淘宝放大镜效果是如何实现的。

    实现过程

    项目结构

    图片描述

    我们整个项目结构并不复杂，由images目录、jquery-3.2.1.min.js、style.css、main.js、index.html等内容构成。

    • images目录。存放项目所使用的图片素材。

    • jquery-3.2.1.min.js。jQuery库（如果你想熟悉一下原生JS，可不选）。

    • style.css。控制项目css样式文件。

    • main.js。控制项目逻辑的js文件。

    • index.html。控制项目dom结构。

    素材

    小图(small.jpg)

    图片描述

    原图(big.jpg)

    图片描述

    放大镜背景图(mask_bg.jpg)

    图片描述

    实现原理

    图片描述

    图片描述

    • 放大镜 == 100*100橘色方块 简称：方块1

    • 左窗口 == 200*200蓝色方块 简称：方块2

    • 右窗口 == 200*200紫色方块 简称：方块3

    • 原图 == 400*400青色方块 简称：方块4

    大致原理如下：
    用一个表达式就是：方块1的left值（或top值）/方块4的left值（或top值）=（-1）*方块2的宽度/方块4的宽度。这里我们需要注意的是方块1的定位父级是方块2，方块4的定位父级是方块3。另外小图的长宽与左窗口的长宽保持一致。我们等比例地根据方块1的top值和left值去修改方块4的top值和left值，并且方块超出部分不可见，就可以实现放大镜效果。

    文件内容

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿淘宝放大镜效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
    <div class="leftView">
        <div class="mask"></div>
        <img class="smallImg" src="images/small.jpg" alt="缩小版"/>
    </div>
    <div class="rightView">
        <img class="bigImg" src="images/big.jpg" alt="放大版"/>
    </div>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="main.js"></script>
</html>

    • .mask 代表 放大镜

    • .leftView 代表 左窗口

    • .rightView 代表 右窗口

    • .bigImg 代表 原图

    CSS

    #container{
   position: relative;    
}
.leftView{
    position: relative;
    width: 418px;
    height: 418px;
}
.smallImg{
    max-height: 100%;
    max-width: 100%;
}
.mask{
    display: none;
    position: absolute;
    background: url(./images/mask_bg.png);
    cursor: move;
}
.rightView{
    position: absolute;
    left:458px;
    top:0;
    width:418px;
    height:418px;
    overflow:hidden; 
}
.bigImg{
    position: absolute;
    top:0;
    left:0;
}

    JS各模块实现

    计算放大镜的长宽

    这里说明一下我们为什么要动态计算放大镜的长宽，主要原因是原图的长宽是不确定的。但是我们要满足放大镜/右窗口=左窗口/原图,这里左窗口和右窗口的长宽是确定的，所以放大镜的长宽是需要根据原图的长宽进行计算。

      function calculateMaskWH(){
         var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width();
         var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height();
         $('.mask').css({
            "width":width,
            "height":height
         });
    }
    监听左窗口mouseover和mouseout事件

    在鼠标没有悬浮在左窗口时，放大镜、右窗口和原图是不可见的。当鼠标悬浮在左窗口之上时，放大镜、右窗口和原图是可见的。

     //监听鼠标mouseover事件
 $('.leftView').on('mouseover',function(){
        $('.mask').css('display','block');
        $('.rightView').css('display','block');        
    });
 //监听鼠标mouseout事件  
 $('.leftView').on('mouseout',function(){
        $('.mask').css('display','none');
        $('.rightView').css('display','none');
    });
    监听左窗口mousemove事件

    监听mousemove事件，我们需要干两件事。第一件事，动态改变放大镜的top值和left值。第二件事是根据放大镜的top值和left值，等比例修改原图的top值和left值。因此我们这里的难点就是如何计算top值和left值。另外，我们要保证放大镜不能出界。

     $('.leftView').on('mousemove',function(event){
        //计算放大镜的left值和top值
        var left=event.pageX-$(this).offset().left-$('.mask').width()/2;
        var top=event.pageY-$(this).offset().top-$('.mask').height()/2;
        //判断放大镜左右是否出界
        if(left<0){
            left=0
        }else if(left>$(this).width()-$('.mask').width()){
            left=$(this).width()-$('.mask').width();
        }
        //判断放大镜上下是否出现
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$('.mask').height()){
            top=$(this).height()-$('.mask').height();
        }
        $('.mask').css({
            left:left+'px',
            top:top+'px'
        });
        //计算比例
        var rate=$('.bigImg').width()/$('.leftView').width();
        $('.bigImg').css({
            left:-rate*left+'px',
            top:-rate*top+'px'
        });
    });

    JS完整代码

    $(function(){
    //计算放大镜的长宽
    calculateMaskWH(); 
    //监听鼠标mouseover事件
    $('.leftView').on('mouseover',function(){
        $('.mask').css('display','block');
        $('.rightView').css('display','block');        
    });
    //监听鼠标mouseout事件    
    $('.leftView').on('mouseout',function(){
        $('.mask').css('display','none');
        $('.rightView').css('display','none');
    });
    $('.leftView').on('mousemove',function(event){
        //计算放大镜的left值和top值
        var left=event.pageX-$(this).offset().left-$('.mask').width()/2;
        var top=event.pageY-$(this).offset().top-$('.mask').height()/2;
        //判断放大镜左右是否出界
        if(left<0){
            left=0
        }else if(left>$(this).width()-$('.mask').width()){
            left=$(this).width()-$('.mask').width();
        }
        //判断放大镜上下是否出现
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$('.mask').height()){
            top=$(this).height()-$('.mask').height();
        }
        $('.mask').css({
            left:left+'px',
            top:top+'px'
        });
        //计算比例
        var rate=$('.bigImg').width()/$('.leftView').width();
        $('.bigImg').css({
            left:-rate*left+'px',
            top:-rate*top+'px'
        });
    });
    //计算机放大镜的长宽
    function calculateMaskWH(){
         var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width();
         var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height();
         $('.mask').css({
            "width":width,
            "height":height
         });
    }
});

    最终效果演示

    图片描述

    htmljqueryhtml5css3javascript
    wuming
    3.2k 声望788 粉丝

    Success is not final, failure is not fatal, it is the courage to continue that counts.

    « 上一篇
    50行代码搞定弹幕效果
    下一篇 »
    带你轻松搞定时间选择控件原理

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    从零开始，揭秘React服务端渲染核心技术

    wuming赞 70阅读 12.9k评论 5

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新