当前位置: 首页 > 工具软件 > elevateZoom > 使用案例 >

elevateZoom的使用(适用于只有一张图)

柴瀚昂
2023-12-01

html:

用<script src='..'>引入elevatezoom的js

在要使用的图片<img>里面加上属性:data-zoom-image=‘任意图片路径’(该图片不重要)

 

js:

自己定义一个函数:

function elevatezoom_show(url, box) {
var big = $(box).data('elevateZoom'); //box放img的id或者类名
big.swaptheimage(url, url);

}

 

在id处调用放大镜:(可以在option里面设置放大镜配置,也可以去掉option,此时为默认配置)

var option = { zoomWindowOffety: 190, zoomWindowOffetx: -340, zoomWindowWidth: 700, zoomWindowHeight: 800 };

$('#我是图片id').elevateZoom(option);

 

直接在引入图片的地方调用函数:

elevatezoom_show(url, box) // url放图片地址,box放img的id

 

放大镜就搞定了!!

另附:

elevateZoom的配置表:

 

参数描述默认值
responsiveSet to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on. Possible Values:false
scrollZoomSet to true to activate zoom on mouse scroll. Possible Values:false
imageCrossfadeSet to true to activate simultaneous crossfade of images on gallery change. Possible Values:false
loadingIconSet to the url of the spinner icon to activatfalse
easingSet to true to activate easing.false
easingTypedefault easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b Extend jquery with other easing types before initiating the plugin and pass the easing type as a string value.zoomdefault

easingDuration

lensSizeused when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated200
zoomWindowWidthWidth of the zoomWindow (Note: zoomType must be400
zoomWindowHeightHeight of the zoomWindow (Note: zoomType must be400
zoomWindowOffetxx-axis offset of the zoom window0
zoomWindowOffetyy-axis offset of the zoom window0
zoomWindowPositionOnce positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust Possible values: 1-161
zoomTintFadeInSet as a number e.g 200 for speed of Tint fadeInfalse
zoomTintFadeOutSet as a number e.g 200 for speed of Tint fadeOutfalse
borderSizeBorder Size of the ZoomBox - Must be set here as border taken into account for plugin calculations4
galleryThis assigns a set of gallery links to the zoom imagenull
tintenable a tint overlay, other options: truefalse
tintColourcolour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)#333
tintOpacity0.4opacity of the tint
zoomLensset to false to hide the Lenstrue

 

该表出处:http://www.sucaihuo.com/js/127.html

 

 

注意:一般放大镜都是一大一小两张图 ,该方法适用只有一张大图的时候。如有两张图,将函数里面的big.swaptheimage(url, url);放入不同图片地址,修改函数重新调用

 

 类似资料: