代码部分

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>鼠标跟随</title>
  7.     <!-- IMPORT CSS -->
  8.     <link rel="stylesheet" href="css/reset.min.css">
  9.     <style>
  10.         .product {
  11.             box-sizing: border-box;
  12.             margin: 20px auto;
  13.             width: 460px;
  14.             display: flex;
  15.         }
  17.         .product li {
  18.             box-sizing: border-box;
  19.             margin-right: 20px;
  20.             width: 100px;
  21.             height: 76px;
  22.             border: 1px solid lightcoral;
  23.         }
  25.         .product li:nth-last-child(1) {
  26.             margin-right: 0;
  27.         }
  29.         .product li img {
  30.             width: 100%;
  31.             height: 100%;
  32.         }
  34.         .detail {
  35.             /* 相对于 BODY 定位 */
  36.             position: absolute;
  37.             top: 0;
  38.             left: 0;
  39.             box-sizing: border-box;
  40.             width: 400px;
  41.             height: 300px;
  42.             border: 1px solid #DDD;
  43.         }
  45.         .detail img {
  46.             width: 100%;
  47.             height: 100%;
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <ul class="product">
  54.         <!-- li*4>img[src='images/apple_$.jpg'][big-img='images/apple_$_bigger.jpg'] -->
  55.         <li>
  56.             <img src="images/apple_1.jpg" alt="" big-img="images/apple_1_bigger.jpg">
  57.         </li>
  58.         <li>
  59.             <img src="images/apple_2.jpg" alt="" big-img="images/apple_2_bigger.jpg">
  60.         </li>
  61.         <li>
  62.             <img src="images/apple_3.jpg" alt="" big-img="images/apple_3_bigger.jpg">
  63.         </li>
  64.         <li>
  65.             <img src="images/apple_4.jpg" alt="" big-img="images/apple_4_bigger.jpg">
  66.         </li>
  67.     </ul>
  68.     <!-- <div class="detail">
  69.         <img src="images/apple_1_bigger.jpg" alt="">
  70.     </div> -->
  72.     <!-- IMPORT JS -->
  73.     <script src="js/jquery.min.js"></script>
  74.     <script>
  75.         let $product = $('.product'),
  76.             $productList = $product.children('li'),
  77.             $body = $('body'),
  78.             $detail = null;
  80.         function computed(ev) {
  81.             $detail.css({
  82.                 top: ev.pageY + 15,
  83.                 left: ev.pageX + 15
  84.             });
  85.         }
  87.         $productList.mouseover(function (ev) {
  88.             // this:当前操作的LI
  89.             let $this = $(this),
  90.                 bigImg = $this.children('img').attr('big-img');
  91.             if (!$detail) {
  92.                 $body.append(`<div class="detail">
  93.                     <img src="${bigImg}" alt="">
  94.                 </div>`);
  95.                 $detail = $('.detail');
  96.             }
  97.             computed(ev);
  98.         }).mouseout(function (ev) {
  99.             if ($detail) {
  100.                 $detail.remove();
  101.                 $detail = null;
  102.             }
  103.         }).mousemove(computed);
  104.     </script>
  105. </body>
  106. </html>

图片资源

apple_1.jpgapple_1_bigger.jpgapple_2.jpgapple_2_bigger.jpgapple_3.jpgapple_3_bigger.jpgapple_4.jpgapple_4_bigger.jpg