JS放大镜

最新推荐文章于 2022-09-12 16:29:26 发布

Bumphy

最新推荐文章于 2022-09-12 16:29:26 发布

阅读量466

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/Bumphy/article/details/71177508

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

JS的日常——图片放大镜效果

基础应用：适合入门的小伙伴

=================================================

一、什么是放大镜

（一）放大镜

放大镜是一种常见于现代网页的呈现效果，类似于现实生活中的放大镜效果，
目的是为了突出页面元素的细节，通常用于图片信息的细节呈现，这在一些购物类网站是非常常见的。
其实，放大镜的原理只不过是切换不同尺寸的图片的呈现区域（通过坐标实现），进而造成一种放大图片的错觉。

（二）效果实例
这里写图片描述

（三）实现要点

元素页面坐标值
clientX/clientY、offsetLeft/offsetTop/offsetWidth/offsetHeight
图片缩放比例值
percentX/percentY

(补充：当然了，首先要把大小尺寸不同的图片准备好，比如一张小图，一张大图)

（四）代码模块

第一部分：html部分（页面框架）

<body>
    <div id="box">
        <!--小图-->
        <div id="small">
            <img src="img/small.jpg" alt="">
            <!--鼠标滑块-->
            <span id="block"></span>
            <!--遮罩：解决卡顿的问题-->
            <span id="mask"></span>
        </div>
        <!--大图-->
        <div id="big">
            <img src="img/big.jpg" alt="">
        </div>
    </div>
</body>

第二部分：css部分（基本样式）

    *{
        margin:0;
        padding:0;
    }
    img{
        display:block;
    }
    #box{
        margin:50px auto;
        background: #a7fa6a;
        border:2px solid #6afabc;
        height:250px;
        width:400px;
        position:relative;
    }
    #small{
        position:relative;
        width:160px;
        height:250px;
        border:1px solid #1f7bf9;
    }
    #small img{
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        left:0;
    }
    #block{
        height:50px;
        width:50px;
        position:absolute;
        background:#6afabc;
        opacity:.5;
        filter:alpha(opacity=50);
        display: none;
    }
    #mask{
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        z-index: 100;
    }
    #big{
        position:absolute;
        top:0;
        right:0;
        width:160px;
        height:250px;
        border:1px solid #1f7bf9;
        overflow: hidden;
        display:none;
    }

    #big img{
        position:absolute;
        top:0;
        right:0;
    }

3 第三部分：js部分（添加交互事件）

window.onload = function(){
    //获取页面元素
    var oBox=document.getElementById("box");
    var small =document.getElementById("small");
    var mask = document.getElementById("mask");
    var mouseBlock = document.getElementById("block");
    var big = document.getElementById("big");
    var smallPic = document.getElementById("small").getElementsByTagName("img")[0];
    var bigPic = document.getElementById("big").getElementsByTagName("img")[0];
    //添加鼠标移入移出事件
    small.onmouseover = function(){
        mouseBlock.style.display = "block";
        big.style.display = "block";
    }
    small.onmouseout = function(){
        mouseBlock.style.display = "none";
        big.style.display = "none";
    }
    //鼠标移动事件
    mask.onmousemove = function(evt){
        var e = evt || window.event;
        var le = e.clientX - oBox.offsetLeft - small.offsetLeft - mouseBlock.offsetWidth / 2;//滑块的offsetLeft值
        var to = e.clientY - oBox.offsetTop - small.offsetTop - mouseBlock.offsetHeight /2 ;
        //设置滑块拖拽边界
        if(le<0){
            le = 0;
        }else if(le > mask.offsetWidth - mouseBlock.offsetWidth ){
            le = mask.offsetWidth - mouseBlock.offsetWidth;
        };
        if(to<0){
            to = 0;
        }else if(to > mask.offsetHeight - mouseBlock.offsetHeight ){
            to = mask.offsetHeight - mouseBlock.offsetHeight;
        };
        //滑块的left值和top值
        mouseBlock.style.left = le + "px";
        mouseBlock.style.top = to + "px";
        //滑块在小图上的滑动比例=当前left/top值   /   滑块在小图上的滑动范围
        var percentX = le / (mask.offsetWidth - mouseBlock.offsetWidth);
        var percentY = to / (mask.offsetHeight - mouseBlock.offsetHeight);

        //大图的显示区域：滑动系数 * 大图在其所在Div中的移动范围
        bigPic.style.left = - percentX * (bigPic.offsetWidth - big.offsetWidth) + "px";
        bigPic.style.top =  - percentY * (bigPic.offsetHeight - big.offsetHeight) + "px";
    }
}