原生JS——高清放大镜效果

最新推荐文章于 2022-11-30 11:01:44 发布
最新推荐文章于 2022-11-30 11:01:44 发布
阅读量291 收藏
点赞数
分类专栏： 漫漫前端路 文章标签： 原生JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xue_zenghui/article/details/85210367
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>zhengfei</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>
    //获取需要的元素
    var box = my$("box");
    var small = box.children[0];
    var mask = small.children[1];
    var big = box.children[1];
    //鼠标进入显示遮挡层和大图
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    };
    //鼠标离开隐藏遮挡层和大图
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    };
    //鼠标的移动事件（小层上移动）
    small.onmousemove = function (e) {
        //此时可视区域鼠标的横纵坐标
        var x = e.clientX - mask.offsetWidth / 2;
        var y = e.clientY - mask.offsetHeight / 2;
        x = x - 100;
        y = y - 100;
        x = x > 0 ? x : 0;
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        y = y > 0 ? y : 0;
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
        //为遮挡层的left top赋值
        mask.style.left = x + "px";
        mask.style.top = y + "px";
        //遮挡层的移动距离：大图的移动距离====遮挡层的最大移动距离：大图的最大移动距离
        //遮挡层的最大横向移动距离
        var xMaskMax = small.offsetWidth - mask.offsetWidth;
        //遮挡层的最大纵向移动距离
        var yMaskMax = small.offsetHeight - mask.offsetHeight;
        //大图的横向最大移动距离
        var xBigMax = big.children[0].offsetWidth - big.offsetWidth;
        //大图的纵向最大移动距离
        var yBigMax = big.children[0].offsetHeight - big.offsetHeight;
        big.children[0].style.marginLeft = -x * xBigMax / xMaskMax + "px";
        big.children[0].style.marginTop = -y * yBigMax / yMaskMax + "px";
    };
</script>
</body>
</html>

注：my$为封装的通过id获取元素函数

function my$(id) {
    return document.getElementById(id);
};

移动大图时设置的不是left和top，而是marginLeft和marginTop

效果图：

筝非
关注
专栏目录
js实现放大镜效果
克隆窝
12-18 768
在我们平时见到很多购物网站都会有放大镜效果的出现，当我们将鼠标放在一个商品图片的上面，就会在旁边出现对应的放大效果。
原生js实现高清放大镜效果
litcangosh的博客
09-03 190
html部分 <div class="box" id="box"> <div class="small"><!--小层--> <img src="images/small.jpg" width="350" height="450" alt=""/> <div class="mask"></d...
js实现放大镜的效果
weixin_30763455的博客
06-11 62
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{ margin:0px; padding:0px; } #box{ width:430px; height:430...
放大镜
promis_的博客
12-16 126
CSS样式： <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative;
原生js实现仿电商网站商品浏览——放大镜功能
weixin_42143467的博客
03-26 463
一、需求分析 为实现以上效果，可知需求大体如下 鼠标移入遮罩层放大图需要显示，鼠标移出的时候遮罩层和放大图隐藏 鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题） 放大图也要按照左边（遮罩层）移动比例来移动 鼠标移到小图上可以切换图片 二、总体思路设计 左侧使用块级元素 嵌套,右侧使用一张背景图和(enlarge作为可视区域). 由于需要鼠标进行操作后才会可视,故此将mask(遮罩层)和enlarge（放大图的可视区），的display属性初始值设置为none; 元素排列 <.
原生JS 实现放大镜
daiwenjia310的博客
08-28 228
<!-- 放大镜容器 --> <div class="container"> <!-- 小图 --> <div class="small-box"> <img src="./images/goods.jpg" alt="loadding err" class="small-img"...
HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
最新发布
11-30 1664
html网页制作期末大作业成品_网页设计期末作业
「JS逆向」工具篇——Chrome DevTools
光光的博客
08-23 3245
文章目录说明常见的逆向需求Chrome DevTools使用说明Elements简单的静态分析：Event Listener93-452g](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTU0NTk3LTYyNzYxMzJmMTg0ZDRmZmMucG5n?x-oss-process=image/format,png)Dom动态分析：DOM Breakpoints
ThreeJs学习笔记——ObjLoader加载以及渲染分析
weixin_34268610的博客
12-11 6295
一、前言 这篇文章主要学习 ThreeJs 中的 demo loader/obj2，主要是分析一下 obj 是如何加载的，纹理以及材质是如何加载的，3d camera 以及 camera controller 这些是如何实现的等。那么，先来 2 个 gif 图震撼一下吧。 二、代码分析 1.html 部分 &lt;div id="glFullscreen"&gt; &lt;!-- 渲染...
js放大镜效果
WangYuJiao的博客
08-04 484
html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东商城放大镜效果</title> <!-- 链接css--> <link rel="stylesheet" href="j...
原生js 放大镜
weixin_43624523的博客
03-28 184
<!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-U...
用js实现放大镜效果
justbe_myself的博客
03-15 1174
放大镜效果在电商网站中经常被使用到，下面我们就用js实现来它吧 1.首先我们得先实现放大镜效果所需要的布局和css样式，当然，这里我们用大中小套图来实现放大镜的效果，平时的话一套图也能实现且实现起来更加的简易，下面是css和html的代码： <style> *{ margin: 0;padding: 0; } .box{ ...
原生JS实现放大镜效果代码详解
放大镜 - 原生js封装 <!-- 引入样式表 --> <div class="header">... 产品图片"> <div id="magnifier"></div> <!-- 其他HTML内容 --> ``` 在上面的代码中，我们有一个`<img>`标签显示原始图像，还有一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值