原生js实现放大镜

(编辑：jimmy 日期: 2026/2/26 浏览：3 次 )

原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php"small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="/UploadFiles/2021-04-02/misc.php">

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇：Ajax异步获取html数据中包含js方法无效的解决方法
下一篇：jQuery实现单击按钮遮罩弹出对话框效果（2）