js实现淘宝京东等购物网站中商品图片放大的效果

最新推荐文章于 2024-06-10 10:01:25 发布
最新推荐文章于 2024-06-10 10:01:25 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37679293/article/details/86514847
版权

例子如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片放大效果</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: 0px;
            left: 0px;
            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>
    //根据id获取元素对象
    function my$(id) {
        return document.getElementById(id);
    }
    //get the elements needed
    var box = my$("box");
    var small = box.children[0];
    var mask = small.children[1];
    var big = box.children[1];
    var bigImg = big.children[0];
    //register mouseover event
    small.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    }
    //register mouseleave event
    small.onmouseleave = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }

    //register the mousemove event
    small.onmousemove = function (e) {
        // get the position
        var x = e.clientX;
        var y = e.clientY;
        //solve the problem of margin
        x = x - 100;
        y = y - 100;
        //make the mouse is in the center of mask
        x = x - mask.offsetWidth / 2;
        y = y - mask.offsetHeight / 2;
        //the minimum position of mask
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        //the maximum position of mask
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
        //set the position of mask
        mask.style.left = x + "px";
        mask.style.top = y + "px";
        //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
        //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
        //大图的横向的最大移动距离
        var maxX = bigImg.offsetWidth-big.offsetWidth;
        //大图的纵向的最大移动距离
        var maxY = bigImg.offsetHeight-big.offsetHeight;
        //大图的横向移动的坐标
        var bigImgMoveX = x*maxX/(small.offsetWidth - mask.offsetWidth);
        //大图的纵向移动的坐标
        var bigImgMoveY = y*maxX/(small.offsetWidth - mask.offsetWidth);
        //设置图片移动
        bigImg.style.marginLeft = -bigImgMoveX+"px";
        bigImg.style.marginTop = -bigImgMoveY+"px";
    }
</script>
</body>
</html>

效果如下：（图片可以自己找）

 

菜鸟更要好好努力撒
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS做淘宝商品放大镜
weixin_45702261的博客
12-17 482
原生JS做淘宝商品放大镜 效果图预览 HTML部分 结构分析 首先要清楚整个界面的分布情况，这里用id或是class，我一开始用的都是id，但后面做js的时候有一些需要document. querySelectorAll("className")返回一个关于class="className"数组,，我才改过来的 div id="itemarea"：整个区域最大的div，包含着其他的div元素 div id="pic"：存放被选中的大图片的区域 div id="cover"：跟随鼠标浮动的用于选择将要被
京东商品图片放大效果
05-05
仿制京东商品展示放大效果，图片放大效果,商品图片局部放大效果。
纯js仿淘宝京东商品放大镜功能
12-09
效果图： 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style> *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; position: relative; margin-left: 50px; margin-top: 50px; } .imgContent>img{ wid
推荐开源项目：Node.js电子商务商店(eTswana Stores)
最新发布
gitblog_00063的博客
06-10 278
推荐开源项目：Node.js电子商务商店(eTswana Stores) 项目地址:https://gitcode.com/mrmodise/nodejs-ecommerce-store 在这个数字化的时代，建立一个功能齐全的在线购物平台已经成为许多企业和创业者的首选。今天，我们向您推荐一款基于Node.js的开源电商应用——eTswana Stores。这个项目采用了一系列前沿的技术和工具，为您...
图片放大镜（有意思的JS 二）
Zhangguohao666的博客
02-21 1207
28800秒，给你带来超有意思的放大镜效果
js实现图片放大镜效果——简单方法
yehaocheng520的博客
07-31 7478
之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501 当时是在vue项目中使用的，其实跟在js中原理也是一样的。 实现图片放大镜效果的重点就是下面的这张图了： 上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就
仿淘宝、京东商品放大镜效果
08-13
在电商网站上，商品图片的展示对于用户购物体验至关重要，其中一种常见的高级功能就是“商品放大镜效果”。这种效果使得用户在浏览商品图片时，可以通过鼠标悬停在图片上，看到图片局部放大的效果，从而更清晰地查看...
仿东京，天猫，淘宝网商品放大镜效果
11-29
该插件主要通过两个图像来实现放大镜效果：一个是原始商品图片，另一个是高分辨率的放大图。当用户将鼠标移动到原始图片上时，插件会根据鼠标位置动态调整放大图的显示，呈现出类似放大镜的效果。同时，它还可以实现...
仿淘宝京东评论图片.zip
11-19
在IT行业中，网页开发是一项关键技能，而"仿淘宝京东评论图片.zip"的资源提供了一个模仿淘宝和京东购物平台评论图片展示功能的实现方案。这个压缩包文件包含了一个设计精巧的图片查看交互效果，旨在帮助开发者理解并...
仿淘宝放大镜效果
04-26
在IT行业中，尤其是在前端开发领域，"仿淘宝放大镜效果"是一种常见的用户体验增强技术，它让用户在浏览商品图片时能够通过鼠标悬停实现局部放大的视觉效果，从而更清晰地查看商品细节。这一效果通常应用于电子商务...
lg.rar_shadeg6x_商品放大镜代码
09-21
总的来说，这个压缩包提供的代码资源是用于创建电商网站商品主图的放大镜效果，涉及到前端开发中的JavaScript编程、CSS样式设计和图片处理等多个技术领域。开发者可以通过学习和应用这些代码，为自己的电商网站增加...
JS商品图片局部放大效果代码.zip
05-25
JS商品图片局部放大效果代码，适用于电商网站进行商品展示使用，鼠标点击左边小图，右边显示大图，鼠标经过大图，显示图片细节放大效果，点击大图会弹出原图！
js放大镜（适用于商品详情）
10-22
用Js写的放大镜功能 支持应用到商品详情中 鼠标划过图片放大图片中的细节
很精美的仿京东商城产品详细JS放大效果
09-05
很精美的仿京东商城产品详细JS放大效果,选择小图展示大图，放然可通可放大镜放大到更大，太美了，别找了，快下截使用吧
一个很经典的JS产品展示图片代码
05-13
一个很经典的JS产品展示图片代码 不看你会后悔
html5仿淘宝京东商品图片放大（放大镜）功能.rar
07-10
html5仿淘宝京东放大镜，实现一个交互性非常好的图片放大特效，除了使用HTML5技术外，还引入了jquery插件来辅助完成放大功能。本功能可用于各种企业、公司网站的产品展示模块，或在线商城中，兼容性比较好，在移动端也可很好的运行。
js实现商品图片放大镜
Evan_QB的博客
09-07 1545
html代码: css样式: * { margin: 0; padding: 0; } .box { width: 3
js 商品图片放大镜
weixin_50636536的博客
01-07 112
<!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>Do.
京东图片的放大移动案例
grow_的博客
05-30 194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
html点击图片局部放大,js实现图片局部放大效果
06-10
要实现图片的局部放大效果，可以使用JavaScript和CSS来实现。下面是一种实现方式： 1. HTML代码 首先，需要在HTML代码中添加图片元素和一个容器元素，用于显示放大后的局部图像。 ```html <img src="image.jpg" id="image" /> <div id="container"></div> ``` 2. CSS样式 在CSS中，需要设置容器元素的样式，使其覆盖在图片上方，并且设置该元素的宽度和高度为放大后的局部图像的大小。 ```css #container { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-repeat: no-repeat; background-size: 400px 400px; display: none; } ``` 3. JavaScript代码 接下来，需要使用JavaScript代码来实现图片局部放大的效果。具体实现步骤如下： - 获取图片元素和容器元素。 - 监听图片元素的鼠标移动事件。 - 在事件处理程序中，计算当前鼠标位置所对应的局部图像的位置。 - 设置容器元素的背景图像和位置，并显示容器元素。 ```javascript var image = document.getElementById('image'); var container = document.getElementById('container'); image.addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var bgPosX = -x * 2; var bgPosY = -y * 2; container.style.backgroundImage = 'url(' + this.src + ')'; container.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px'; container.style.display = 'block'; }); image.addEventListener('mouseout', function () { container.style.display = 'none'; }); ``` 在上面的代码中，我们使用了鼠标移动事件和鼠标移出事件来控制容器元素的显示和隐藏。在鼠标移动事件中，我们计算当前鼠标位置所对应的局部图像的位置，并将其设置为容器元素的背景位置。最后，我们显示容器元素。在鼠标移出事件中，我们隐藏容器元素。 这样，就可以实现图片的局部放大效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值