Elevate-焦点图

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

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

HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
<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中不同的放大镜效果代码都很简单,代码都已翻译注释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('#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 //是否开启鼠标滚动 
});

参数

描述

默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~