1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQZoom放大镜插件</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.8.2.min.js"> 7 </script> 8 <script type="text/javascript" 9 src="Js-8-7/jquery.jqzoom.js"> 10 </script> 11 <link rel="stylesheet" type="text/css" 12 href="Css-8-7/jquery.jqzoom.css" /> 13 <style type="text/css"> 14 body{font-size:13px} 15 span{color:Red;font-size:12px} 16 .divFrame{260px;border:solid 1px #666} 17 .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold} 18 .divFrame .divContent{padding:8px;line-height:1.6em} 19 .divFrame .divContent img{border:1px solid #ccc} 20 </style> 21 <script type="text/javascript"> 22 $(function() { 23 $("#jqzoom").jqzoom( //绑定图片放大插件jqzoom 24 { 25 zoomWidth: 230, 26 zoomHeight: 230, 27 zoomType: 'reverse' 28 } 29 ); 30 }); 31 </script> 32 </head> 33 <body> 34 <div class="divFrame"> 35 <div class="divTitle"> 36 图片放大镜 37 </div> 38 <div class="divContent"> 39 <a href="Images-8-7/bag.jpg" id="jqzoom" title="我的背包"> 40 <img src="Images-8-7/bagsmall.jpg" /> 41 </a> 42 </div> 43 </div> 44 </body> 45 </html>