JS实现图片放大查看
示例：https://wumaozheng.com/static-pages/image-magnifier.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Image</title> 6 <script language="javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> 7 <script language="javascript"> 8 $(function() { 9 var offsetX = 20 - $("#imgtest").offset().left; 10 var offsetY = 20 - $("#imgtest").offset().top; 11 var size = 1.2 * $('#imgtest ul li img').width(); 12 $("#imgtest ul li").mouseover(function(event) { 13 var $target = $(event.target); 14 if ($target.is('img')) { 15 $("<img id='tip' src='" + $target.attr("src") + "'>").css({ 16 "height": size, 17 "width": size, 18 "top": event.pageX + offsetX, 19 "left": event.pageY + offsetY, 20 }).appendTo($("#imgtest")); 21 } 22 }).mouseout(function() { 23 $("#tip").remove(); 24 }).mousemove(function(event) { 25 $("#tip").css({ 26 "left": event.pageX + offsetX, 27 "top": event.pageY + offsetY 28 }); 29 }); 30 }) 31 </script> 32 <style type="text/css"> 33 img { 34 cursor: pointer; 35 height: 368px; 36 width: 368px; 37 position: absolute; 38 } 39 #imgtest { 40 height: auto; 41 width: auto; 42 margin: 30px 60px 0px 60px; 43 position: absolute; 44 } 45 #imgtest ul { 46 position: relative; 47 width: auto; 48 height: auto; 49 background: #00F; 50 } 51 #imgtest ul li { 52 position: relative; 53 height: 378px; 54 width: 378px; 55 list-style: none; 56 float: left; 57 margin: 3px; 58 } 59 </style> 60 </head> 61 <body> 62 <div id="imgtest"> 63 <ul> 64 <li><img src="http://inbmi.com/image/vp/1f029f78c164f4a9723d9af43fd2febe/5B800E3E/t51.2885-15/e35/31136663_1649816651776613_694881964250890240_n.jpg" /></li> 65 <li><img src="http://inbmi.com/image/vp/4c9e38ab5c5d52eb30f671934dcb35bc/5B9AAD80/t51.2885-15/e35/31270267_220885218674663_609168203867750400_n.jpg" /></li> 66 <li><img src="http://inbmi.com/image/vp/eba5901d056b5c740d6b671c66ac0137/5B77C34C/t51.2885-15/e35/31364150_1665566736868399_5092204927984336896_n.jpg" /></li> 67 <li><img src="http://inbmi.com/image/vp/c82844d3912e0c9685b8a0f79f01caea/5B88819E/t51.2885-15/e35/31490408_366139313900670_1486728493155745792_n.jpg" /></li> 68 <li><img src="http://inbmi.com/image/vp/4224804abad8cfbb4da15f8c2363dcae/5B8275CC/t51.2885-15/e35/30920518_160809141256123_1097812066267299840_n.jpg" /></li> 69 <li><img src="http://inbmi.com/image/vp/4f90f49ec34f1adaed77e9cb92c7cccc/5B9D254E/t51.2885-15/e35/30591652_1850590825241799_3543379466950541312_n.jpg" /></li> 70 </ul> 71 </div> 72 </body> 73 </html>
