Project 1: Sprite diagram using – splicing Hello

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>sprite</title>
    <style>
      .box {
        width: 800px;
        height: 400px;
        /* background-color: pink; * /
        margin: 0 auto;
        position: relative;
        top: 100px;
        /* Font-size =0; Remove the default spacing */ for inline block elements
        font-size: 0;
      }
      .box1 {
        background-image: url(http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2szyji/TmEUgtj9EK6.7V8ajmQrELKvKUtfMaiP9uoTWoxxB4kMVa * yfZPxKhV5VUaXUVhqt 50ABgODKBZHBgTiVWITSh8Mvx.Mu1bAwzJuOb3eT58! /b&bo=6APoA.gD6AMBGT4! &rf=viewer_4);
        display: inline-block;
      }
      .h {
        width: 141px;
        height: 155px;
        background-position: -27px -208px;
      }
      .e {
        width: 127px;
        height: 155px;
        background-position: -584px -47px;
      }
      .l {
        width: 141px;
        height: 155px;
        background-position: -548px -210px;
      }
      .l {
        width: 133px;
        height: 155px;
        background-position: -548px -210px;
      }
      .o {
        width: 153px;
        height: 155px;
        background-position: -9px -372px;
      }
    </style>
  </head>
  <body>
    <! -- 1. Set box box1's background image; 2. Use the drawing tool to open the picture and measure the size of the box with the selection box. It is better to set the same size for each box. 3. In picture viewing mode, move the mouse pointer to the upper left corner of the letter to be selected, and the position will be displayed. Adjust the width and height of the box more realistically -->
    <div class="box">
      <div class="h box1"></div>
      <div class="e box1"></div>
      <div class="l box1"></div>
      <div class="l box1"></div>
      <div class="o box1"></div>
    </div>
  </body>
</html>
Copy the code

Project 2: Magnifying glass

This project must be combined with the following knowledge, to understand.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #d8e7fa;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .item_area {
        position: relative;
        width: 400px;
        height: 480px;
        border: 1px solid # 888888;
        margin: 50px;
      }
      .item_area .pic {
        margin-bottom: 15px;
      }
      .item_area .pic img {
        width: 400px;
        height: 400px;
      }
      .item_area .pic .cover {
        position: absolute;
        top: 0;
        height: 0;
        width: 150px;
        height: 150px;
        background-color: rgba(244.245.234.0.3);
        /* background-image: Url, "http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEF3A.cd5SVBGQ98wblceKrKmGMuFRajAVrG8epoZ 3ThAD3WX0R87tWNSsqShuhIkPSQXevJNxYNsOFhbDP0IwDQ! /b&bo=ngGeAQAAAAABFzA! &rf=viewer_4"); * /
      }
      .item_area .list {
        display: flex;
      }
      /* center */
      .item_area .list li {
        margin: auto;
      }
      .item_area .list .current {
        border: 2px solid red;
      }
      .item_area .list img {
        width: 50px;
        height: 50px;
        display: block;
      }
      .item_area .detail {
        width: 400px;
        height: 400px;
        border: 1px solid # 888888;
        position: absolute;
        top: 0;
        left: 420px;
        background-image: url("Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE * * OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4 tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4");
        background-size: 266%;
      }
    </style>
  </head>
  <body>
    <div class="item_area">
      <div class="pic">
        <img
          src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE * * OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4 tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
        />
        <div class="cover"></div>
      </div>
      <ul class="list">
        <li>
          <img
            class="current"
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE * * OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4 tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
          />
        </li>
        <li>
          <img
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEFFUJb * SjxiRjUm5CqPgRHQJvLtt6K4qJWr7HWFlxoW8 T3tSgtql1w9aUeMSAnMdBb3v1d7UHHwCo2lJenl7EvE! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
          />
        </li>
        <li>
          <img
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEIVorZ64 * 1 gdi. LE1 * VJ9XFIFCwwKWIwIeAtPrFjVrgs ifWR.StUcRpd7GDUWAH5MKRhdv5VWYchM9WmD8KnSy4! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
          />
        </li>
        <li>
          <img
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEHk79Ewm5AdRJ.UAIqlM3him5yyJJ2KJrIKgTzNPyX9V aNS0vr4*B2jk7NQfldcx2gXxVDDlgbE07Rf4q4cYirg! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
          />
        </li>
        <li>
          <img
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEMivVmlhpCyP3T2uilzKFl4kXOuRpkmfUOp7z1xEeFAG 9u7.sTQwGZtj6VZd11b7IUeqEkX8ejHXRo5tsXOrscI! /b&bo=9AH0AfQB9AEBGT4! &rf=viewer_4"
          />
        </li>
        <li>
          <img
            src="Http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEIsKTjdjju63APyAqUvb9nxp8CfdVIbJSOURXmeQ3cz1 07vyVN9t25WjMI9JYZs1f5bc9SkI1agXK29WoT9tlcY! /b&bo=IAMgAyADIAMBGT4! &rf=viewer_4"
          />
        </li>
      </ul>
      <div class="detail"></div>
    </div>
    <script>
      let list = document.querySelector(".list");
      let imgs = list.querySelectorAll("img");
      let img = document.querySelector(".pic img");
      let pic = document.querySelector(".item_area .pic");
      let cover = document.querySelector(".cover");
      let detail = document.querySelector(".detail");
      list.addEventListener("mousemove".function (e) {
        if (e.target.tagName == "IMG") {
          img.src = e.target.src;
          detail.style.backgroundImage = `url("${e.target.src}") `;
          imgs.forEach((item) = > {
            item.className = "";
          });
          e.target.className = "current"; }}); pic.addEventListener("mousemove".function (e) {
        let ClientX = e.clientX;
        let ClientY = e.clientY;

        // The distance between the element and the browser boundary
        let picT = pic.getBoundingClientRect().top;
        let picL = pic.getBoundingClientRect().left;
        // Calculate that 75 is half the width and height of the box
        let top = ClientY - picT - 75;
        let left = ClientX - picL - 75;
        top < 0 ? (top = 0) : top > 250 ? (top = 250) : top;

        left < 0 ? (left = 0) : left > 250 ? (left = 250) : left;
        cover.style.top = top + "px";
        cover.style.left = left + "px";
        detail.style.backgroundPosition =
          (left / 250) * 100 + "%" + (top / 250) * 100 + "%";
      });
    </script>
  </body>
</html>
Copy the code