Browse Source

图片预览效果

luyanan 7 years ago
parent
commit
33eebc804a
2 changed files with 168 additions and 0 deletions
  1. 1 0
      css/zoomify.min.css
  2. 167 0
      js/public/zoomify.js

+ 1 - 0
css/zoomify.min.css

@ -0,0 +1 @@
1
.zoomify{cursor:pointer;cursor:-webkit-zoom-in;cursor:zoom-in}.zoomify.zoomed{cursor:-webkit-zoom-out;cursor:zoom-out;padding:0;margin:0;border:none;border-radius:0;box-shadow:none;position:relative;z-index:1501}.zoomify-shadow{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;z-index:1500;background:rgba(0,0,0 ,.3);opacity:0}.zoomify-shadow.zoomed{opacity:1;cursor:pointer;cursor:-webkit-zoom-out;cursor:zoom-out}

+ 167 - 0
js/public/zoomify.js

@ -0,0 +1,167 @@
1
/**
2
 * Zoomify
3
 * A jQuery plugin for simple lightboxes with zoom effect.
4
 * http://indrimuska.github.io/zoomify
5
 *
6
 * (c) 2015 Indri Muska - MIT
7
 */
8
;(function($){
9
	
10
	// initialization
11
	Zoomify = function (element, options) {
12
		var that = this;
13
		
14
		this._zooming = false;
15
		this._zoomed  = false;
16
		this._timeout = null;
17
		this.$shadow  = null;
18
		this.$image   = $(element).addClass('zoomify');
19
		this.options  = $.extend({}, Zoomify.DEFAULTS, this.$image.data(), options);
20
		
21
		this.$image.on('click', function () { that.zoom(); });
22
		$(window).on('resize', function () { that.reposition(); });
23
		$(document).on('scroll', function () { that.reposition(); });
24
	};
25
	Zoomify.DEFAULTS = {
26
		duration: 200,
27
		easing:   'linear',
28
		scale:    0.9
29
	};
30
	
31
	// css utilities
32
	Zoomify.prototype.transition = function ($element, value) {
33
		$element.css({
34
			'-webkit-transition': value,
35
			'-moz-transition': value,
36
			'-ms-transition': value,
37
			'-o-transition': value,
38
			'transition': value
39
		});
40
	};
41
	Zoomify.prototype.addTransition = function ($element) {
42
		this.transition($element, 'all ' + this.options.duration + 'ms ' + this.options.easing);
43
	};
44
	Zoomify.prototype.removeTransition = function ($element, callback) {
45
		var that = this;
46
		
47
		clearTimeout(this._timeout);
48
		this._timeout = setTimeout(function () {
49
			that.transition($element, '');
50
			if ($.isFunction(callback)) callback.call(that);
51
		}, this.options.duration);
52
	};
53
	Zoomify.prototype.transform = function (value) {
54
		this.$image.css({
55
			'-webkit-transform': value,
56
			'-moz-transform': value,
57
			'-ms-transform': value,
58
			'-o-transform': value,
59
			'transform': value
60
		});
61
	};
62
	Zoomify.prototype.transformScaleAndTranslate = function (scale, translateX, translateY, callback) {
63
		this.addTransition(this.$image);
64
		this.transform('scale(' + scale + ') translate(' + translateX + 'px, ' + translateY + 'px)');
65
		this.removeTransition(this.$image, callback);
66
	};
67
	
68
	// zooming functions
69
	Zoomify.prototype.zoom = function () {
70
		if (this._zooming) return;
71
		
72
		if (this._zoomed) this.zoomOut();
73
		else this.zoomIn();
74
	};
75
	Zoomify.prototype.zoomIn = function () {
76
		var that      = this,
77
			transform = this.$image.css('transform');
78
			this.$image.css("opacity",1)
79
		
80
		this.transition(this.$image, 'none');
81
		this.transform('none');
82
		
83
		var offset     = this.$image.offset(),
84
			width      = this.$image.outerWidth(),
85
			height     = this.$image.outerHeight(),
86
			nWidth     = this.$image[0].naturalWidth || +Infinity,
87
			nHeight    = this.$image[0].naturalHeight || +Infinity,
88
			wWidth     = $(window).width(),
89
			wHeight    = $(window).height(),
90
			scaleX     = Math.min(nWidth, wWidth * this.options.scale) / width,
91
			scaleY     = Math.min(nHeight, wHeight * this.options.scale) / height,
92
			scale      = Math.min(scaleX, scaleY),
93
			translateX = (-offset.left + (wWidth - width) / 2) / scale,
94
			translateY = (-offset.top + (wHeight - height) / 2 + $(document).scrollTop()) / scale;
95
		
96
		this.transform(transform);
97
		
98
		this._zooming = true;
99
		this.$image.addClass('zoomed').trigger('zoom-in.zoomify');
100
		setTimeout(function () {
101
			that.addShadow();
102
			that.transformScaleAndTranslate(scale, translateX, translateY, function () {
103
				that._zooming = false;
104
				that.$image.trigger('zoom-in-complete.zoomify');
105
			});
106
			that._zoomed = true;
107
		});
108
	};
109
	Zoomify.prototype.zoomOut = function () {
110
		var that = this;
111
		this.$image.css("opacity",0)
112
		
113
		this._zooming = true;
114
		this.$image.trigger('zoom-out.zoomify');
115
		this.transformScaleAndTranslate(1, 0, 0, function () {
116
			that._zooming = false;
117
			that.$image.removeClass('zoomed').trigger('zoom-out-complete.zoomify');
118
		});
119
		this.removeShadow();
120
		this._zoomed = false;
121
	};
122
	
123
	// page listener callbacks
124
	Zoomify.prototype.reposition = function () {
125
		if (this._zoomed) {
126
			this.transition(this.$image, 'none');
127
			this.zoomIn();
128
		}
129
	};
130
	
131
	// shadow background
132
	Zoomify.prototype.addShadow = function () {
133
		var that = this;
134
		if (this._zoomed) return;
135
		
136
		if (that.$shadow) that.$shadow.remove();
137
		this.$shadow = $('<div class="zoomify-shadow"></div>');
138
		$('body').append(this.$shadow);
139
		this.addTransition(this.$shadow);
140
		this.$shadow.on('click', function () { that.zoomOut(); })
141
		
142
		setTimeout(function () { that.$shadow.addClass('zoomed'); }, 10);
143
	};
144
	Zoomify.prototype.removeShadow = function () {
145
		var that = this;
146
		if (!this.$shadow) return;
147
		
148
		this.addTransition(this.$shadow);
149
		this.$shadow.removeClass('zoomed');
150
		this.$image.one('zoom-out-complete.zoomify', function () {
151
			if (that.$shadow) that.$shadow.remove();
152
			that.$shadow = null;
153
		});
154
	};
155
	
156
	// plugin definition
157
	$.fn.zoomify = function (option) {
158
		return this.each(function () {
159
			var $this   = $(this),
160
				zoomify = $this.data('zoomify');
161
			
162
			if (!zoomify) $this.data('zoomify', (zoomify = new Zoomify(this, typeof option == 'object' && option)));
163
			if (typeof option == 'string' && ['zoom', 'zoomIn', 'zoomOut', 'reposition'].indexOf(option) >= 0) zoomify[option]();
164
		});
165
	};
166
	
167
})(jQuery);