简易放大镜（最全代码解析）JavaScript（ES6面向对象）

飒尔

已于 2022-03-04 15:43:45 修改

阅读量258

点赞数 1

分类专栏： javascript 文章标签： javascript es6

于 2021-09-08 18:37:22 首次发布

本文链接：https://blog.csdn.net/csertuh/article/details/120186279

版权

这篇博客详细解析了如何使用JavaScript（ES6面向对象）实现一个简易的放大镜功能，提供了完整的代码示例，适合前端开发者学习和参考。

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

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES6放大镜</title>
  </head>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      .clear::after{
          content: "";
          clear: both;
          display: block;
      }
      .main{
          width: 800px;
          height: 800px;
          margin: 20px auto;
      }
      .box{
          width: 300px;
          height: 300px;
          position: relative;
          cursor: move;
          border: 1px solid #ccc;
      }
      .box h2{
          width: 100%;
          height: 100%;
          display: none;
      }
	  .box h2 img{
		  width: 100%;
		  height: 100%;
	  }
      .box .mask{
          width: 120px;
          height: 120px;
          background-color: #fede4f;
          opacity: 0.5;
          display: none;
          position: absolute;
          left: 0;
          top: 0;
      }
      .box .bigbox{
          width: 300px;
          height: 300px;
          border: 1px solid #ccc;
          overflow: hidden;
          position: absolute;
          left: 400px;
          top: 0px;
          display: none;
      }
      .box .bigbox img{
        position: absolute;