Elevate-焦点图

Elevate是一个图片局部放大js（移步官网，因为是国外网站所有有点慢）

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。它还内置了一个相册展示的模式，可同时展示多张可缩放的图片。它自带了淡入淡出、easing 等多种效果。

HTML

下面6种不同放大镜HTML结果：

<h1>默认效果</h1> 
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
<h1>内置镜头</h1> 
<img id="zoom_02" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
<h1>镜头聚焦</h1> 
<img id="zoom_03" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
<h1>淡入/淡出设置</h1> 
<img id="zoom_04" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
<h1>动画</h1> 
<img id="zoom_05" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> 
<h1>鼠标滚动</h1> 
<img id="zoom_06" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />

jQuery

6中不同的放大镜效果代码都很简单，代码都已翻译注释：

$('#zoom_01').elevateZoom({});//默认效果 
 
$('#zoom_02').elevateZoom({ //内置镜头 
    zoomType: "inner",//类型：内置镜头 
    cursor: "crosshair", //光标：十字 
    zoomWindowFadeIn: 500,//镜头窗口淡入速度 
    zoomWindowFadeOut: 750 //镜头窗口淡出速度 
}); 
 
$("#zoom_03").elevateZoom({ //镜头聚焦 
    zoomType: "lens",//类型：透镜效果 
    lensShape: "round", //透镜形状：圆形 
    lensSize: 200 //透镜尺寸：长和宽：200px 
}); 
 
$("#zoom_04").elevateZoom({ //淡入/淡出设置 
    zoomWindowFadeIn: 500,//镜头窗口淡入速度 
    zoomWindowFadeOut: 500,//镜头窗口淡出速度 
    lensFadeIn: 500,//透镜淡入速度 
    lensFadeOut: 500//透镜淡出速度 
}); 
 
$("#zoom_05").elevateZoom({ //动画 
    easing: true //是否开启动画效果 
}); 
 
$("#zoom_06").elevateZoom({ //鼠标滚动 
    scrollZoom: true //是否开启鼠标滚动 
});

参数

描述

默认值

responsive

Set 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

scrollZoom

Set to true to activate zoom on mouse scroll. Possible Values:

false

imageCrossfade

Set to true to activate simultaneous crossfade of images on gallery change. Possible Values:

false

loadingIcon

Set to the url of the spinner icon to activat

false

easing

Set to true to activate easing.

false

easingType

default 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

lensSize

used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated

200

zoomWindowWidth

Width of the zoomWindow (Note: zoomType must be

400

zoomWindowHeight

Height of the zoomWindow (Note: zoomType must be

400

zoomWindowOffetx

x-axis offset of the zoom window

0

zoomWindowOffety

y-axis offset of the zoom window

0

zoomWindowPosition

Once positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust Possible values: 1-16

1

zoomTintFadeIn

Set as a number e.g 200 for speed of Tint fadeIn

false

zoomTintFadeOut

Set as a number e.g 200 for speed of Tint fadeOut

false

borderSize

Border Size of the ZoomBox - Must be set here as border taken into account for plugin calculations

4

gallery

This assigns a set of gallery links to the zoom image

null

tint

enable a tint overlay, other options: true

false

tintColour

colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)

#333

tintOpacity

0.4

opacity of the tint

zoomLens

set to false to hide the Lens

true