js文字放大镜效果

基础概念

文字放大镜效果是一种常见的用户界面交互设计，它允许用户通过鼠标悬停在文本上时，显示一个放大的视图，以便更清晰地查看细节。这种效果通常用于展示小字体或需要精细查看的内容。

类型

静态放大镜：固定位置的放大镜窗口，显示鼠标悬停处的文本放大版本。
跟随鼠标放大镜：放大镜窗口跟随鼠标移动，实时显示当前鼠标下的文本放大视图。

应用场景

产品详情页：展示产品规格、说明等小字体信息。
电子文档预览：在预览电子文档时，方便查看细节。
地图服务：在地图应用中放大显示地名或其他重要标记。

实现示例

以下是一个简单的JavaScript实现文字放大镜效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Magnifier</title>
<style>
  .magnifier {
    position: relative;
    display: inline-block;
  }
  .magnifier-lens {
    position: absolute;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: none;
  }
  .magnified-text {
    position: absolute;
    top: 0;
    left: 100%;
    width: 300px;
    border: 1px solid #000;
    background: white;
    padding: 10px;
    display: none;
    z-index: 10;
  }
</style>
</head>
<body>

<div class="magnifier">
  Hover over me!
  <div class="magnifier-lens"></div>
  <div class="magnified-text"></div>
</div>

<script>
  const magnifier = document.querySelector('.magnifier');
  const lens = document.querySelector('.magnifier-lens');
  const magnifiedText = document.querySelector('.magnified-text');

  magnifier.addEventListener('mousemove', (e) => {
    const rect = magnifier.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    lens.style.left = `${x - lens.offsetWidth / 2}px`;
    lens.style.top = `${y - lens.offsetHeight / 2}px`;

    magnifiedText.innerHTML = magnifier.innerText;
    magnifiedText.style.left = `${x + 10}px`;
    magnifiedText.style.top = `${y - magnifiedText.offsetHeight / 2}px`;

    lens.style.display = 'block';
    magnifiedText.style.display = 'block';
  });

  magnifier.addEventListener('mouseleave', () => {
    lens.style.display = 'none';
    magnifiedText.style.display = 'none';
  });
</script>

</body>
</html>