2-4 图片放大镜插件——jqzoom
本节编程练习不计算学习进度，请电脑登录imooc.com操作

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。

例如，在页面中，添加一个被<a>元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当在小图片中移动鼠标时，将调用放大镜插件的jqzoom()方法，在图片的右侧显示与小图片所选区域相同的放大区域，实现放大镜的效果。

任务

我来试试，亲自使用放大镜插件放大指定的图片

在下列代码的第25行，调用放大镜插件的jqzoom()方法，实现图片移动区域的放大镜效果。

index.htmlstyle.css 
  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>图片放大镜插件</title>
  5.         <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  8.         <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title">
  14.                 <span class="fl">图片放大镜</span> 
  15.             </div>
  16.             <div class="content">
  17.                 <a href="http://img1.sycdn.imooc.com//52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
  18.                      <img src="http://img1.sycdn.imooc.com//52e4aee700012df702130212.jpg" alt=""/>
  19.                 </a>
  20.             </div>
  21.         </div>
  22.  
  23.         <script type="text/javascript">
  24.             $(function () {
  25.                 ? //绑定图片放大插件jqzoom
  26.                     zoomWidth: 123, //小图片所选区域的宽
  27.                     zoomHeight: 123, //小图片所选区域的高
  28.                     zoomType: 'reverse' //设置放大镜的类型
  29.                 });
  30.             });
  31.         </script>
  32.     </body>
  33. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21.  
  22. .fl
  23. {
  24.     float: left;
  25. }
  26. .fr
  27. {
  28.     float: right;
  29. }
下一节