图片放大缩小的zoom.js
1 +function ($) { "use strict";
2
3 /**
4 * The zoom service
5 */
6 function ZoomService () {
7 this._activeZoom =
8 this._initialScrollPosition =
9 this._initialTouchPosition =
10 this._touchMoveListener = null
11
12 this._$document = $(document)
13 this._$window = $(window)
14 this._$body = $(document.body)
15
16 this._boundClick = $.proxy(this._clickHandler, this)
17 }
18
19 ZoomService.prototype.listen = function () {
20 this._$body.on('click', '[data-action="zoom"]', $.proxy(this._zoom, this))
21 }
22
23 ZoomService.prototype._zoom = function (e) {
24
25 var target = e.target
26
27 if (!target || target.tagName != 'IMG') return
28
29 if (this._$body.hasClass('zoom-overlay-open')) return
30
31 if (e.metaKey || e.ctrlKey) {
32 return window.open((e.target.getAttribute('data-original') || e.target.src), '_blank')
33 }
34
35 // if (target.width >= ($(window).width() - Zoom.OFFSET)) return
36
37 this._activeZoomClose(true)
38
39 this._activeZoom = new Zoom(target)
40 this._activeZoom.zoomImage()
41
42 // todo(fat): probably worth throttling this
43 this._$window.on('scroll.zoom', $.proxy(this._scrollHandler, this))
44
45 this._$document.on('keyup.zoom', $.proxy(this._keyHandler, this))
46 this._$document.on('touchstart.zoom', $.proxy(this._touchStart, this))
47
48 // we use a capturing phase here to prevent unintended js events
49 // sadly no useCapture in jquery api (http://bugs.jquery.com/ticket/14953)
50 if (document.addEventListener) {
51 document.addEventListener('click', this._boundClick, true)
52 } else {
53 document.attachEvent('onclick', this._boundClick, true)
54 }
55
56 if ('bubbles' in e) {
57 if (e.bubbles) e.stopPropagation()
58 } else {
59 // Internet Explorer before version 9
60 e.cancelBubble = true
61 }
62 }
63
64 ZoomService.prototype._activeZoomClose = function (forceDispose) {
65 if (!this._activeZoom) return
66
67 if (forceDispose) {
68 this._activeZoom.dispose()
69 } else {
70 this._activeZoom.close()
71 }
72
73 this._$window.off('.zoom')
74 this._$document.off('.zoom')
75
76 document.removeEventListener('click', this._boundClick, true)
77
78 this._activeZoom = null
79 }
80
81 ZoomService.prototype._scrollHandler = function (e) {
82 if (this._initialScrollPosition === null) this._initialScrollPosition = $(window).scrollTop()
83 var deltaY = this._initialScrollPosition - $(window).scrollTop()
84 if (Math.abs(deltaY) >= 40) this._activeZoomClose()
85 }
86
87 ZoomService.prototype._keyHandler = function (e) {
88 if (e.keyCode == 27) this._activeZoomClose()
89 }
90
91 ZoomService.prototype._clickHandler = function (e) {
92 if (e.preventDefault) e.preventDefault()
93 else event.returnValue = false
94
95 if ('bubbles' in e) {
96 if (e.bubbles) e.stopPropagation()
97 } else {
98 // Internet Explorer before version 9
99 e.cancelBubble = true
100 }
101
102 this._activeZoomClose()
103 }
104
105 ZoomService.prototype._touchStart = function (e) {
106 this._initialTouchPosition = e.touches[0].pageY
107 $(e.target).on('touchmove.zoom', $.proxy(this._touchMove, this))
108 }
109
110 ZoomService.prototype._touchMove = function (e) {
111 if (Math.abs(e.touches[0].pageY - this._initialTouchPosition) > 10) {
112 this._activeZoomClose()
113 $(e.target).off('touchmove.zoom')
114 }
115 }
116
117
118 /**
119 * The zoom object
120 */
121 function Zoom (img) {
122 this._fullHeight =
123 this._fullWidth =
124 this._overlay =
125 this._targetImageWrap = null
126
127 this._targetImage = img
128
129 this._$body = $(document.body)
130 }
131
132 Zoom.OFFSET = 40
133 Zoom._MAX_WIDTH = 2560
134 Zoom._MAX_HEIGHT = 4096
135
136 Zoom.prototype.zoomImage = function () {
137 var img = document.createElement('img')
138 img.onload = $.proxy(function () {
139 this._fullHeight = Number(img.height)
140 this._fullWidth = Number(img.width)
141 this._zoomOriginal()
142 }, this)
143 img.src = this._targetImage.src
144 }
145
146 Zoom.prototype._zoomOriginal = function () {
147 this._targetImageWrap = document.createElement('div')
148 this._targetImageWrap.className = 'zoom-img-wrap'
149
150 this._targetImage.parentNode.insertBefore(this._targetImageWrap, this._targetImage)
151 this._targetImageWrap.appendChild(this._targetImage)
152
153 $(this._targetImage)
154 .addClass('zoom-img')
155 .attr('data-action', 'zoom-out')
156
157 this._overlay = document.createElement('div')
158 this._overlay.className = 'zoom-overlay'
159
160 document.body.appendChild(this._overlay)
161
162 this._calculateZoom()
163 this._triggerAnimation()
164 }
165
166 Zoom.prototype._calculateZoom = function () {
167 this._targetImage.offsetWidth // repaint before animating
168
169 var originalFullImageWidth = this._fullWidth
170 var originalFullImageHeight = this._fullHeight
171
172 var scrollTop = $(window).scrollTop()
173
174 var maxScaleFactor = originalFullImageWidth / this._targetImage.width
175
176 var viewportHeight = ($(window).height() - Zoom.OFFSET)
177 var viewportWidth = ($(window).width() - Zoom.OFFSET)
178
179 var imageAspectRatio = originalFullImageWidth / originalFullImageHeight
180 var viewportAspectRatio = viewportWidth / viewportHeight
181
182 if (originalFullImageWidth < viewportWidth && originalFullImageHeight < viewportHeight) {
183 this._imgScaleFactor = maxScaleFactor
184
185 } else if (imageAspectRatio < viewportAspectRatio) {
186 this._imgScaleFactor = (viewportHeight / originalFullImageHeight) * maxScaleFactor
187
188 } else {
189 this._imgScaleFactor = (viewportWidth / originalFullImageWidth) * maxScaleFactor
190 }
191 }
192
193 Zoom.prototype._triggerAnimation = function () {
194 console.log('放大的时候触发')
195 this._targetImage.offsetWidth // repaint before animating
196
197 var imageOffset = $(this._targetImage).offset()
198 var scrollTop = $(window).scrollTop()
199
200 var viewportY = scrollTop + ($(window).height() / 2)
201 var viewportX = ($(window).width() / 2)
202
203 var imageCenterY = imageOffset.top + (this._targetImage.height / 2)
204 var imageCenterX = imageOffset.left + (this._targetImage.width / 2)
205
206 this._translateY = viewportY - imageCenterY
207 this._translateX = viewportX - imageCenterX
208
209 var targetTransform = 'scale(' + this._imgScaleFactor + ')'
210 var imageWrapTransform = 'translate(' + this._translateX + 'px, ' + this._translateY + 'px)'
211
212 if ($.support.transition) {
213 imageWrapTransform += ' translateZ(0)'
214 }
215
216 $(this._targetImage)
217 .css({
218 '-webkit-transform': targetTransform,
219 '-ms-transform': targetTransform,
220 'transform': targetTransform
221 })
222
223 $(this._targetImageWrap)
224 .css({
225 '-webkit-transform': imageWrapTransform,
226 '-ms-transform': imageWrapTransform,
227 'transform': imageWrapTransform
228 })
229
230 this._$body.addClass('zoom-overlay-open')
231 }
232
233 Zoom.prototype.close = function () {
234 console.log('缩回的时候出发1');
235 this._$body
236 .removeClass('zoom-overlay-open')
237 .addClass('zoom-overlay-transitioning')
238
239 // we use setStyle here so that the correct vender prefix for transform is used
240 $(this._targetImage)
241 .css({
242 '-webkit-transform': '',
243 '-ms-transform': '',
244 'transform': ''
245 })
246
247 $(this._targetImageWrap)
248 .css({
249 '-webkit-transform': '',
250 '-ms-transform': '',
251 'transform': ''
252 })
253
254 if (!$.support.transition) {
255 return this.dispose()
256 }
257
258 $(this._targetImage)
259 .one($.support.transition.end, $.proxy(this.dispose, this))
260 .emulateTransitionEnd(300)
261 }
262
263 Zoom.prototype.dispose = function () {
264 console.log('缩回的时候出发2')
265 if (this._targetImageWrap && this._targetImageWrap.parentNode) {
266 $(this._targetImage)
267 .removeClass('zoom-img')
268 .attr('data-action', 'zoom')
269
270 this._targetImageWrap.parentNode.replaceChild(this._targetImage, this._targetImageWrap)
271 this._overlay.parentNode.removeChild(this._overlay)
272
273 this._$body.removeClass('zoom-overlay-transitioning')
274 }
275 }
276
277 // wait for dom ready (incase script included before body)
278 $(function () {
279 new ZoomService().listen()
280 })
281
282 }(jQuery)
图片放大缩小的zoom.js的更多相关文章
- 图片放大缩小插件 zoom.js 怎么用
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- javascript仿新浪微博图片放大缩小及旋转效果
javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- 自定义mousewheel事件,实现图片放大缩小功能实现
本文是承接 上一篇的<自定义鼠标滚动事件> 的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...
- imageView图片放大缩小及旋转
imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
- wpf下的图片放大缩小
WPF下实现图片的放大缩小移动 在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...
- 41.Android之图片放大缩小学习
生活中经常会用到图片放大和缩小,今天简单学习下. 思路:1.添加一个操作图片放大和缩小类; 2. 布局文件中引用这个自定义控件; 3. 主Activity一些修改. 代码如下: 增加图片操作类: ...
随机推荐
- Vim注释行的方法
目录 一.Visual block 加注释 去注释 二.正则表达式 加注释 去注释 一.Visual block 加注释 1.首先按键盘上的ESC进入命令行模式 2.再按Ctrl+V进入VISUAL ...
- leetcode 33和 leetcode81 II
//接上上一篇博客,继续这个题目,现在数组中会有重复元素,情况将会变得十分复杂,比如说1,1,1,1,1 或者1,1,3,1再来 3,3,3,1,1,1,3,这些都是可以的,都是符合题目要求的,如 ...
- Java —— for while do...while循环(1)
//for循环 for(初始化语句 ;循环条件; 迭代语句){ 循环体; } //while循环 初始化语句; while(循环条件){ 循环体; 迭代语句; } //do...while循环 初始化 ...
- Contest 985
A 均移到黑色或白色即可. 时间复杂度 \(O\left(n\log n\right)\). B 枚举每种开关判断是否有灯只能靠该种开关控制. 时间复杂度 \(O\left(nm\right)\). ...
- Docker实战 | 第一篇:Centos8 安装 Docker
1. 安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2 2. 配置镜像源 yum config-manager --a ...
- Android多触点总结
文章部分内容参考: http://blog.csdn.net/barryhappy/article/details/7392326 总结: 1. event.getX()可以得到x的坐标,里面的参数0 ...
- moviepy音视频剪辑:颜色相关变换函数blackwhite、colorx、fadein/out、gamma_corr、invert_colors、lum_contrast、mask_color介绍
☞ ░ 前往老猿Python博文目录 ░ 一.引言 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>介绍了剪辑基类的fl.fl_time.fx方法,在<movi ...
- 老猿学5G扫盲贴:NEF、NRF、AF、UPF以及DN的功能
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 NEF:Network Exposure Function ,网络开放 ...
- PyQt(Python+Qt)学习随笔:QScrollArea的alignment属性不起作用的原因
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Scroll Area滚动区域提供了一个呈现在其他部件上的可滚动区域视图,对应类为QScrollAr ...
- 第6章 Python中的动态可执行方法目录
第6.1节 Python代码编译 第6.2节 Python特色的动态可执行方法简介 第6.3节 Python动态执行之动态编译的compile函数 第6.4节 Python动态表达式计算:eval函数 ...