淘宝放大镜效果

青旅半醒 2022-09-24 11:23 186阅读 0赞

*   *  效果图
     *  原理
     *  代码

## 效果图 ##

![这里写图片描述][20160729191339022]

## 原理 ##

![这里写图片描述][20160729191653726]

## 代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
    </head>
    <body>
    <div id="left" style="width: 400px;height: 400px; float: left;cursor: move" >
        <img src="123.jpg" alt="">
    </div>
    <div id="right" style="width: 400px;height: 400px;float: left;overflow: auto;display: none"><img src="123.jpg" alt="" style="width: 800px;height: 800px">
    </div>
    <div id="mo" style="width: 50px;height: 50px;background-color: rgba(1,1,1,0.3);position: absolute;display: none" ></div>
    
    <script> var right=document.getElementById("right"); var left=document.getElementById("left"); //鼠标放上去 显示 左边的 left.onmouseover=function(){ right.style.display=""; } //鼠标移动 根据左边 百分比改变 右边的滚动条 left.onmousemove=function(e){ e=e||window.event; //求 左右图片的百分比 var xPercentage=parseInt(right.firstChild.style.width)/parseInt(left.style.width); var yPercentage=parseInt(right.firstChild.style.height)/parseInt(left.style.height); //右边图片的移动距离(滚动条) 等于左边移动距离*百分比 //e.offsetx 相对 事件元素的坐标 right.scrollLeft=e.offsetX*xPercentage; right.scrollTop=e.offsetY*yPercentage; var mo=document.getElementById("mo"); //显示 mo.style.display=""; mo.style.left=e.offsetX-25+"px"; mo.style.top= e.offsetY-25+"px"; } </script>
    </body>
    </html>

[20160729191339022]: /images/20220719/a55174280c1743edbaa6ad9b07c02116.png
[20160729191653726]: /images/20220719/da6475292e1d4e638ad0952765508cc5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端高级实战 - 实现京东淘宝商品详细放大镜效果

web前端高级实战：实现商品详细放大镜效果 > 在我们访问淘宝天猫或京东等购物网站时，点击某个商品进入详情页面会看到一个商品的缩略图，当鼠标浮到缩略图上时，在右侧就会出现

朱雀/ 2022年12月28日 07:17/ 0 赞/ 123 阅读

相关 javascript淘宝主图放大镜功能

工欲善其事，必先利其器。想要实现某一种效果，我们必须要先了解其中的原理。放大镜的功能就是通过获取鼠标在小图中的位置，然后根据大小图的尺寸比例换算出大图需要显示的部分，然后使

偏执的太偏执、/ 2022年09月26日 00:23/ 0 赞/ 172 阅读

相关淘宝放大镜效果

效果图原理代码效果图 ![这里写图片描述][20160729191339022] 原理 ![这里写图片描述][20

青旅半醒/ 2022年09月24日 11:23/ 0 赞/ 187 阅读

相关淘宝搜索框效果

html代码： <DOCTTYPE!> <html> <head> <meta http-equiv="Content-Type" con

拼搏现实的明天。/ 2022年07月15日 17:53/ 0 赞/ 159 阅读

相关仿淘宝的放大镜效果

概述主要介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单详细代码下载：[http:

浅浅的花香味﹌/ 2022年05月31日 11:17/ 0 赞/ 251 阅读

相关模仿淘宝放大镜。

一般在淘宝购物的时候都会有一个方法镜的功能，下面就给大家介绍一下这个放大镜实现的原理。简单的来说一下吧，其实实现这个是需要两张相同的图片。这两张图片除了大小必须完全一样。

傷城~/ 2022年03月20日 07:56/ 0 赞/ 265 阅读

相关京东淘宝放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

男娘i/ 2022年03月15日 00:14/ 0 赞/ 271 阅读

相关 js-淘宝放大镜

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dla

矫情吗；*/ 2022年03月12日 11:18/ 0 赞/ 294 阅读

相关 js原生淘宝京东宝贝放大镜效果

js实现商城放大镜效果效果： > 鼠标放上去会有半透明遮罩、右边会有大图片局部图。 > 鼠标移动时右边的大图片也会局部移动。 `技术点`： `Even

不念不忘少年蓝@/ 2022年01月07日 20:17/ 0 赞/ 260 阅读

相关淘宝放大镜案例并且兼容ie

最近项目中想实现一个淘宝放大镜的效果自己试了试做出来 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

你的名字/ 2021年09月02日 04:37/ 0 赞/ 455 阅读