放大镜效果，关键是一个小算法

最新推荐文章于 2022-12-29 14:00:00 发布

爱生活，爱编程

最新推荐文章于 2022-12-29 14:00:00 发布

阅读量270

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/109801810

版权

本文介绍了如何创建一个放大镜效果，重点在于一个简单的算法。通过布局和鼠标移动事件，计算左右图片坐标的比例关系，确保右侧大图能跟随鼠标移动展示细节。关键点在于确定右侧图片的最大移动距离，例如当大图宽度为800px，实际只需移动300px即可显示完整图像。掌握这一算法后，类似放大镜效果的实现将变得简单。

摘要由CSDN通过智能技术生成

1，布局右侧一个大图片的box
2, 当左侧mousemove 的时候，让图片显示

3，计算坐标位置，有个比列关系！

左边标记盒子的最大移动位置/ 右边大图的最大移动位置
= 左left/右left

右left =左left * 右大最大移动位置/ 左标记盒子的最大移动位置

代码如下：

<!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>Document</title>

    <style>
        .small {
            position: relative;
            left: 0px;
            top: 0px;
            width: 398px;
            height: 398px;
            border: 1px solid #CCC;
            text-align: center;
        }
        
        .small img {
            width: 398px;
            height: 398px;
            backgrou