Author: 刘老师(Aaron Lau)

jQuery的常用插件之放大镜(二)jquery.jqzoom.js

官网地址，使用前，请先点此下载

如果下不下来，请复制链接到迅雷中下载。

如果使用的是Linux或者Mac机，请用wget命令下载。

效果图

jqzoom插件是另一个非常棒的放大镜插件，使用方法也非常简单，只有以下三个步骤

1. 引用jquery.min.js
2. 引用jquery.jqzoom.js
3. 执行jqzoom插件的方法

使用方法

<div class="clearfix">
    <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
        <img src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 4px solid #666;">
    </a>
</div>

<!-- ref 是钩子，一般用在焦点图切换里 -->

<ul id="thumblist" class="clearfix" >
    <li>
        <a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}">
            <img src='imgProd/thumbs/triumph_thumb1.jpg'>
        </a>
    </li>
    <li>
        <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}">
            <img src='imgProd/thumbs/triumph_thumb2.jpg'>
        </a>
    </li>
    <li>
        <a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}">
            <img src='imgProd/thumbs/triumph_thumb3.jpg'>
        </a>
    </li>
</ul>

<script src='jquery.jqzoom.js'></script>
<script>
$(document).ready(function() {
    $('.jqzoom').jqzoom({
        zoomType: 'standard',
        lens:true,
        preloadImages: false,
        alwaysOn:false,
    });
});
</script>

参数

• OPTION NAME
  DEFAULT
  DESCRIPTION
• zoomType
  'standard'
  The others admitted option values are 'reverse','drag','innerzoom'.
• zoomWidth
  300
  The popup window width showing the zoomed area.
• zoomHeight
  300
  The popup window height showing the zoomed area.
• xOffset
  10
  The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left")
• yOffset
  0
  The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom"),
• position
  'right'
  The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom'
• preloadImages
  true
  if set to true,jqzoom will preload large images.
• preloadText
  'Loading zoom'
  The text to show while preloading images.
• title
  true
  Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title.
• lens
  true
  if set to false,the small lens,over the image, won't show.
• imageOpacity
  0.4
  Set the image opacity when the 'zoomType' option is set to 'reverse'.
• showEffect
  'show'
  The effect by which showing the popup window.Options available: 'show' ,'fadein'.
• hideEffect
  'hide'
  The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'.
• fadeinSpeed
  'slow'
  Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number)
• fadeoutSpeed
  '2000'
  Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number)