18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

jQuery变大镜动画特效:Cloud Zoom 应用指南

2021-04-09分享 "> 对不起,没有下一图集了!">

要想在网站在运用Cloud Zoom,只必须包括script脚本制作和CSS文档,同时启用 quickStart() 涵数。将会还必须变更下列CSS类,才可以使有关的图象偏向恰当的相对路径:

.cloudzoom-blank .cloudzoom-ajax-loader        

网页页面案例:

 

下边是一个Cloud Zoom的实例网页页面。

 假如你要给图象加连接,Cloud Zoom将应用连接的href特性替代zoomImage特性:

 

特性:

Cloud Zoom具备很多特性,设定这种特性能够更改照片的外型和视觉效果实际效果。

Cloud Zoom的特性能够在data-cloudzoom里特定特性,比如:

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

文字值/标识符串在引入时要该加引号,如useZoom:“# myZoom”。数据、真伪无需加,如zoomFlyOut:false

留意:Cloud Zoom的老版本(2.1 )规定特性具备严苛的JSON文件格式。尽管仍然能够起效,但如今不强烈推荐应用。

特性目录:


放缩照片的相对路径,假如沒有特定的放缩照片,将应用小图(在图象原素中被特定的照片)         " "               

放缩对话框的特定部位,假如数据(0-15)的部位是相对性于网页页面图象如图所示所显示由下列重要(深蓝色方块意味着放缩对话框):

 

假如出示一字符串,值将被作为一个挑选器来明确原素确实切部位和尺寸的网页页面。

假如"inside"被特定,那麼变大的图象可能出現在网页页面图象内,从3.0提升到,你还可以设定成zoomOffsetX:0

 

       3
 "lens"——CSS的摄像镜头(.cloudzoom-lens)优先选择级、放缩对话框将被调节 "zoom"——CSS(.cloudzoom-zoom)优先选择级、透镜将调节 "full" ——变大对话框将利润最大化充足变大图象的尺寸 "image"——配对小图象放缩对话框

 

特定一个网页页面中的HTML特性图象做为文字题目。或是,特定一个挑选器应用一些HTML內容的题目。

 

   title

 

特定要应用的JavaScript逃出方式,"escape"或“encodeURI”(false = no escaping) ,不强烈推荐应用独特标识符或图象相对路径有时间格

 

   false

在启用CloudZoom.quickStart()以前能够设定一个全局性不正确解决程序,比如:

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

CloudZoom.quickStart();

 function(error){}

原始变大(小图象尺寸的乘数,不必给数据加引号)。“auto”将挑选最好的品质并根据大图图片像规格变大。

  auto

较大容许变大(小图象尺寸的乘数)。“auto”将挑选最好的品质根据大中型图象规格变大

 

  auto

 

延迟时间载入的zoom图象。假如它是确实,zoom图象总是在最开始图象与小图象互动以后被载入,不然将马上载入网页页面载入。假如有很多必须载入的变大图象延迟时间载入将会有效。 

 

  false

 

应用禁止使用的zoom. false = no disable, true = disable always, "auto" = disable 仅有zoom图象是同样的尺寸或低于小图象。留意,假如给你设定变大水准超过1,zoom不容易被和谐用。

 

 false
 number 应用galleryEvent:'mouseover'会延迟更改照片数毫秒,阻拦图象载入恳求访问器导致的时延。      200
"> 对不起,没有下一图集了!">
在线咨询