如何制作h5页面_微信h5是什么_h5模板设计_免费好用的h5制作软件_互动h5
当前位置:建站首页 > 新闻资讯 > 媒体报道 >

jQuery变大镜动画特效:Cloud Zoom3.0 应用指南

发表日期:2021-04-07 11:17文章编辑:jianzhan浏览次数: 标签:    

要想在网站在运用Cloud Zoom,只必须包括script脚本制作和CSS文档,同时启用 quickStart() 涵数。将会还必须变更下列CSS类,才可以使有关的图象偏向恰当的相对路径:
title 变大镜实际效果 /title meta http-equiv="Content-Type" content="text/html; charset=utf-8" / !-- Include jQuery. -- script type="text/javascript" src="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 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 )规定特性具备严苛的JSON文件格式。尽管仍然能够起效,但如今不强烈推荐应用。 特性目录:
放缩对话框的特定部位,假如数据(0-15)的部位是相对性于网页页面图象如图所示所显示由下列重要(深蓝色方块意味着放缩对话框):


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

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



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



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



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

CloudZoom.quickStart();


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


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



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


返回列表
相关新闻

PS钢笔东西怎么抠图-凡科抠图利用滤镜及图层混

photoshop运用ps滤镜及涂层混和把郁金香照片变为水彩画实际效果红动我国 公布 创作者:家...

日期:2021-01-10 浏览次数:69