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="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>
效果展示：
