jquery实现小动画

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7   <title>Document</title>
  8   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  9   <style>
 10     *{
 11       margin:0;
 12       padding:0;
 13     }
 14       .box{
 15         margin:20px auto;
 16         width:462px;
 17         height:77px;
 18         position:relative;
 19       }
 20       .box .imgbox {
 21         width:100%;
 22         overflow:hidden;
 23       }
 24       .box .imgbox li{
 25         float:left;
 26         width:100px;
 27         height:77px;
 28         border:1px solid #000;
 29         margin-right:18px;
 30         list-style:none;
 31       }
 32       .box .imgbox li:nth-last-child(1){
 33         margin-right:0px;
 34       }
 35       .box .imgbox li img{
 36         display:block;
 37         width:100%;
 38         height:100%;
 39       }
 40       .mark{
 41         position:absolute;
 42         top:0;
 43         left:0;
 44         width:400px;
 45         height:300px
 46         box-sizing:border-box;
 47         border:1px solid #000;
 48       }
 49       .box .mark img {
 50         display:block;
 51         width:100%;
 52         height:100%;
 53       }
 54   </style>
 55 </head>
 56 <body>
 57   <section class="box">
 58     <ul class="imgbox">
 59       <li><img src="./small.jpg" data-bigimg="big.jpg" alt=""></li>
 60       <li><img src="./d.jpg" data-bigimg="d_big.jpg" alt=""></li>
 61       <li><img src="./t.jpg" data-bigimg="t_big.jpg" alt=""></li>
 62       <li><img src="./w.jpg" data-bigimg="w_big.jpg" alt=""></li>
 63     </ul>
 64     <!-- <div class="mark">
 65       <img src="./small.jpg" alt="" style="width:400px;height:300px">
 66     </div> -->
 67   </section>
 68   <script>
 69     $(function(){
 70       var $imglist = $(".box>.imgbox>li"),
 71           $mark = null,
 72           $box = $(".box");
 73       $imglist.on("mouseover",function(event){
 74         <!-- 创建mark盒子显示大图片：根据经过的li标签中的小图片，动态创建li中的大图片到mark盒子中 -->
 75           var img_url = $(this).children("img").attr("data-bigimg")
 76           if(!$mark){
 77             $mark = $(`<div class="mark">
 78               <img src="${img_url}" alt="">
 79             </div>`)
 80             $box.append($mark)
 81           }
 82       }).on("mousemove",function(event){
 83         <!-- console.log($box.offset().left) -->
 84         var {top:contop,left:conleft} = $box.offset(),
 85             curL = event.pageX - conleft + 20,
 86             curT = event.pageY - contop + 20;
 87             $mark.css({
 88               top:curT,
 89               left:curL
 90             })
 91       }).on("mouseout",function(){
 92         if($mark){
 93           $mark.remove()
 94           $mark = null
 95         }
 96       })
 97     })
 98   </script>
 99 </body>
100 </html>
View Code

 

效果展示：