淘宝放大镜效果

最新推荐文章于 2022-09-18 10:37:31 发布

geekzsp

最新推荐文章于 2022-09-18 10:37:31 发布

阅读量412

点赞数

分类专栏：前端文章标签： js 放大镜

本文链接：https://blog.csdn.net/mixi9760/article/details/52067953

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

效果图

这里写图片描述

原理

这里写图片描述

代码

<!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>

geekzsp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝放大镜效果

效果图原理代码效果图原理代码<!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" >
复制链接

扫一扫