关于我们     联系我们

脚本效果

老鸟们的插柳成果,给了菜鸟们乘凉的机会

jQuery放大镜特效:Cloud Zoom3.0 使用手册

日期:2016年06月30日   编辑者:   点击量:226566

226566

想要在网站上应用Cloud Zoom,只需要包含script脚本和CSS文件,同时调用 quickStart() 函数。可能还需要更改以下CSS类,才能使相关的图像指向正确的路径:

  • .cloudzoom-blank
  • .cloudzoom-ajax-loader        

网页实例:


下面是一个Cloud Zoom的示例页面。

<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include jQuery. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<!-- Include Cloud Zoom CSS. -->
<link rel="stylesheet" type="text/css" href="cloudzoom/cloudzoom.css" />
<!-- Include Cloud Zoom script. -->
<script type="text/javascript" src="cloudzoom/cloudzoom.min.js"></script>
<!-- Call quick start function. -->
<script type="text/javascript">
  CloudZoom.quickStart();
</script>
</head>
<body>
<img class="cloudzoom" src="images/small/image1.jpg" data-cloudzoom="zoomImage:'images/large/image1.jpg', startMagnification:4" />
</body>
</html>


属性:

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)的位置是相对于页面图像如图所示由以下关键(蓝色方块代表缩放窗口):


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

如果"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
  1.   关闭 我们将在1个工作日回复,资料会保密处理