这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问:

 

​​http://www.mind-projects.it/projects/jqzoom/demos.php​​

 

 

觉得不错就下载一个玩玩吧,jQuery出来的插件都是非常容易使用的,也可以当做学习的示例.

 

如何安装:

 

 

先在网页中包含jQuery文件,然后再包含jQZoom的文件,如下:

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

然后再将jqzoom.css添加到网页中:

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
如何使用?
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
使用是很简单的,先指定一个<a>标签,指向一个大的图片,里面包含一个小图片:
<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

 

SMALLIMAGE.JPG:这个是默认用户看见的图片,也就是之后被放大的图片

BIGIMAGE.JPG: 放大镜所看到的图片
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用来标识这个<a>标签要应用放大镜功能.之后我们可以通过class选择器来选择所有的要应用jQZoom的<a>标签.

MYTITLE/IMAGE TITLE: 这些文本它们会被显示在放大镜窗口上.

 

准备工作做完了就可以通过下面的简单代码来调用jQZoom:

$(document).ready(function(){
  $('.MYCLASS).jqzoom();
});
这样只是使用jQZoom的标签模式,事实上它有更多的参数可以设置,以获得更多的效果,看下面的示例:
$(document).ready(function(){
  var options = {
      zoomWidth: 300,
      zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //and MORE OPTIONS
};
  $('.MYCLASS).jqzoom(options);
});

属性：

Cloud Zoom具有许多属性，设置这些属性可以改变图片的外观和视觉效果。

Cloud Zoom的属性可以在data-cloudzoom里指定属性,例如:

data-cloudzoom = "zoomImage: '/mypath.jpg', useZoom: '#zoom1'"

文本值/字符串在引用时应该加引号，如useZoom:“# myZoom”。数字、真假不用加，如zoomFlyOut:false

注意:Cloud Zoom的旧版本(2.1 1210171228)要求属性具有严格的JSON格式。虽然依然可以生效,但现在不推荐使用。

属性列表：

    属性名

 类型 

      描述  

  默认值 

zoomImage

string

缩放图片的路径，如果没有指定的缩放图片，将使用小图(在图像元素中被指定的图片)

        " "               

tintColor

string

色彩效果

      #fff

tintOpacity

number

指定色彩的透明度，范围是0 - 1，0是完全透明，1是完全不透明。

      0.25

animationTime

number

 动画效果的持续时间,以毫秒为单位。

       500

lensClass

string 

 用于镜头的css类

                  cloudzoom-lens

easeTime (DEPRECATED V3.0)

number

 鼠标滑上时放大图像的时间。数字越大缓动越大，为0时没有缓动。

      500

zoomPosition

number | string   

缩放窗口的指定位置，如果数字(0-15)的位置是相对于页面图像如图所示由以下关键(蓝色方块代表缩放窗口):

jquery zoom jquery放大镜特效_jquery

 

如果提供一个字符串,值将被用作一个选择器来确定元素的确切位置和大小的页面。

如果"inside"被指定,那么放大的图像将会出现在页面图像内，从3.0增加到1303151613，你也可以设置成zoomOffsetX:0

 

       3

 

zoomOffsetX

 

number   

允许您调整缩放窗口的水平位置。从3.0增加到1303151613并且在"inside"工作模式

     15

zoomOffsetY

number

允许您调整缩放窗口的垂直位置。从3.0增加到1303151613并且在"inside"工作模式

      0

zoomFullSizeDEPRECATED (see zoomSizeMode)

boolean

缩放窗口出现在全尺寸的放大图像。

    false

 zoomFlyOut

boolean 

 将'flying'动画打开或关闭

    true

 zoomClass

 string

 用于缩放窗口的css类

   cloudzoom-zoom

 zoomSizeMode

 srting

 定义了缩放窗口和镜头大小的规则。

  • "lens"——CSS的镜头(.cloudzoom-lens)优先级、缩放窗口将被调整
  • "zoom"——CSS(.cloudzoom-zoom)优先级、透镜将调整
  • "full" ——放大窗口将最大化充分放大图像的大小
  • "image"——匹配小图像缩放窗口

     lens

 captionSource

 string

 

指定一个页面中的HTML属性图像作为文本标题。或者,指定一个选择器使用一些HTML内容的标题。

 

   title

 captionType

 string

 指定标题类型,“attr”或“html”

   attr

 captionPosition

 string

 标题的位置, "top" 或"bottom"

    top

 uriEscapeMethod

boolean | string

 

指定要使用的JavaScript逃离方法,"escape"或“encodeURI”(false = no escaping) ，不推荐使用特殊字符或图像路径有空格

 

   false

 errorCallback

function

 

指定一个函数当发生错误时调用。函数将会收到具有以下属性的错误对象:

  • type:字符串名称错误,目前只有“IMAGE_NOT_FOUND”
  • $element:Cloud Zoom允许生成错误的元素
  • data:数据错误,如没有找到图像的文件路径

在调用CloudZoom.quickStart()之前可以设置一个全局错误处理程序，例如:

​​$.fn.CloudZoom.defaults.errorCallback = 
function(error){ alert(error.type); }; 
​

​​CloudZoom.quickStart();​​

 function(error){}

 variableMagnification (from V3.0)

boolean

 是否允许变量放大

  true

 startMagnification (from V3.0)

string|number

 

初始放大(小图像大小的乘数,不要给数字加引号)。“auto”将选择最好的质量并基于大图像尺寸放大。

  auto

 minMagnification (from V3.0)

string|number

 

最低允许放大(小图像大小的乘数)。“auto”将确保镜头尺寸不得大于小图像。

  auto

 maxMagnification (from V3.0)

string|number

 

最大允许放大(小图像大小的乘数)。“auto”将选择最好的质量基于大型图像尺寸放大

 

  auto

 easing (from V3.0)

 number

 数字越大，移动的越平滑越慢

     8

 lazyLoadZoom (from V3.0 rev 1302181432)

 blooean

 

延迟加载的zoom图像。如果这是真的,zoom图像只会在最初图像与小图像交互之后被加载,否则将立即加载页面加载。如果有许多需要加载的放大图像延迟加载可能有用。 

 

  false

 mouseTriggerEvent (from V3.0 rev 1302271415)

 string

鼠标事件用于触发放大。使用“mousemove”或"click"

 mousemove

 disableZoom (from V3.0 rev 1303081245)

string|boolean

 

使用禁用的zoom. false = no disable, true = disable always, "auto" = disable 只有zoom图像是相同的大小或小于小图像。注意,如果你有设置放大水平大于1,zoom不会被禁用。

 

 false

 galleryHoverDelay (from 3.0 rev 1304251647)

 number

使用galleryEvent:'mouseover'会推迟改变图片数毫秒，阻止图像加载请求浏览器造成的拥塞。

     200

 permaZoom

(from 3.0 rev 1308161049)

 boolean

 如果为真，当鼠标划离小图时缩放窗口会保持打开状态

   false

 zoomWidth

zoomHeight

(from 3.0 rev 1311041015)

 number

 设置缩放窗口的宽度/高度，如果设置为"auto"则窗口宽度/高度与小图片宽度/高度一致

      0

 lensWidth

lensHeight

(from 3.0 rev 1311041015)

 number

 设置镜头的宽度/高度

      0

 

 

 

  破罐子互摔