我在本地建了一个html文件，把以下两个代码装进去，
然后运行正常，为什么到服务器上面就不行了，是什么原因？
在本地可以正常的放大缩小图片
在服务器上面运行，点击没有任何效果？
+function() { 'use strict'
function Zooming() {
this._scaleBase = 1.0
this._target = null // Zoomable target
this._body = document.body
this._lastScrollPosition = null
this._scrollThreshold = 40
this._handleClick = this._handleClick.bind(this)
this._handleKeyDown = this._handleKeyDown.bind(this)
this._handleScroll = this._handleScroll.bind(this)
}
Zooming.prototype = {
init: function() {
this._body.addEventListener('click', this._handleClick)
var zoomableImages = document.querySelectorAll('img[data-action="zoom"]')
for (var i = 0; i < zoomableImages.length; i++) {
setCursorStyle(zoomableImages[i], 'zoom-in')
}
},
_handleClick: function(event) {
var target = event.target
if (!target) return
if (target.tagName !== 'IMG') this._close()
if (!target.hasAttribute('data-action')) return
switch (target.getAttribute('data-action')) {
case 'zoom':
this._zoom(target)
break
case 'close':
this._close()
break
default:
break
}
},
_handleKeyDown: function(event) {
if (event.keyCode === 27) this._close() // Esc
},
_handleScroll: function() {
var scrollTop = window.pageYOffset ||
(document.documentElement || this._body.parentNode || this._body).scrollTop
if (this._lastScrollPosition === null) this._lastScrollPosition = scrollTop
var deltaY = this._lastScrollPosition - scrollTop
if (Math.abs(deltaY) >= this._scrollThreshold) {
this._lastScrollPosition = null
this._close()
}
},
_zoom: function(target) {
// Avoid zooming multiple times
if (this._target) return
this._target = new Zoomable(target)
this._target.zoomIn()
document.addEventListener('keydown', this._handleKeyDown)
document.addEventListener('scroll', this._handleScroll)
},
_close: function() {
if (!this._target) return
this._target.zoomOut()
this._target = null
document.removeEventListener('keydown', this._handleKeyDown)
document.removeEventListener('scroll', this._handleScroll)
}
}
/**
* The zoomable image.
*/
function Zoomable(img) {
this._scaleBase = 1.0
this._image = img
this._src = img.getAttribute('src')
this._dataOriginal = img.getAttribute('src')
this._overlay = null // An overlay that whites out the body
this._body = document.body
this._zoomImage = this._zoomImage.bind(this)
this._handleTransitionEnd = this._handleTransitionEnd.bind(this)
this._styles = {
image: {
width: '',
height: '',
transform: '',
zoomIn: {
'position': 'relative',
'z-index': 666,
'-webkit-transition': 'all 300ms',
'-o-transition': 'all 300ms',
'transition': 'all 300ms'
},
zoomOut: {
'position': '',
'z-index': '',
'-webkit-transition': '',
'-o-transition': '',
'transition': ''
}
},
overlay: {
'z-index': 233,
'background': '#fff',
'position': 'fixed',
'top': 0,
'left': 0,
'right': 0,
'bottom': 0,
'filter': 'alpha(opacity=0)',
'opacity': 0,
'-webkit-transition': 'opacity 300ms',
'-o-transition': 'opacity 300ms',
'transition': 'opacity 300ms'
}
}
}
Zoomable.prototype = {
zoomIn: function() {
var img = new Image()
img.onload = (function() {
// If data-orginal is present, set image css width and height explicitly
// so the transformed source image is correctly displayed
if (this._dataOriginal) {
// Save the original image width and height styles if present
this._styles.image.width = this._image.style.width
this._styles.image.height = this._image.style.height
var rect = this._image.getBoundingClientRect()
setStyles(this._image, {
'width': rect.width + 'px',
'height': rect.height + 'px'
})
// Use src as image src
this._image.setAttribute('src', this._dataOriginal)
}
this._calculateZoom()
this._zoomImage()
}).bind(this)
img.src = this._src
},
_calculateZoom: function() {
var rect = this._image.getBoundingClientRect()
var windowCenter = {
x: window.innerWidth / 2,
y: window.innerHeight / 2
}
var imgHalfWidth = rect.width / 2
var imgHalfHeight = rect.height / 2
var imgCenter = {
x: rect.left + imgHalfWidth,
y: rect.top + imgHalfHeight
}
// The vector to translate image to the window center
var translate = {
x: windowCenter.x - imgCenter.x,
y: windowCenter.y - imgCenter.y
}
// The distance between image edge and window edge
var distFromImageEdgeToWindowEdge = {
x: windowCenter.x - imgHalfWidth,
y: windowCenter.y - imgHalfHeight
}
// The additional scale is based on the smaller value of
// scaling horizontally and scaling vertically
var scaleHorizontally = distFromImageEdgeToWindowEdge.x / imgHalfWidth
var scaleVertically = distFromImageEdgeToWindowEdge.y / imgHalfHeight
var scale = this._scaleBase + Math.min(scaleHorizontally, scaleVertically)
// Translate the image to window center, then scale the image
this._styles.image.transform =
'translate(' + translate.x + 'px,' + translate.y + 'px) ' +
'scale(' + scale + ',' + scale + ')'
},
_zoomImage: function() {
// Repaint before animating, fix Safari image flickring issue
this._image.offsetWidth
setStyles(this._image, this._styles.image.zoomIn)
this._image.addEventListener('transitionend', this._handleTransitionEnd)
// Create an overlay, it does not white out at this point
this._overlay = document.createElement('p')
setStyles(this._overlay, this._styles.overlay)
this._body.appendChild(this._overlay)
// Use setTimeout to apply correct overlay opacity transition when
// zooming in, otherwise the transition effect won't trigger.
window.setTimeout((function() {
// Now whites out the overlay
setStyles(this._overlay, {
'filter': "alpha(opacity=100)",
'opacity': 1
})
}).bind(this), 30)
this._transform()
},
zoomOut: function() {
this._image.addEventListener('transitionend', this._handleTransitionEnd)
// Remove the overlay
setStyles(this._overlay, {
'filter': "alpha(opacity=0)",
'opacity': 0
})
this._styles.image.transform = ''
this._transform()
},
_transform: function() {
setStyles(this._image, {
'-webkit-transform': this._styles.image.transform,
'-ms-transform': this._styles.image.transform,
'transform': this._styles.image.transform,
})
},
_handleTransitionEnd: function(event) {
switch (this._image.getAttribute('data-action')) {
case 'close':
if (this._dataOriginal) {
setStyles(this._image, {
'width': this._styles.width,
'height': this._styles.height
})
// Restore the old image src
this._image.setAttribute('src', this._src)
}
this._body.removeChild(this._overlay)
setStyles(this._image, this._styles.image.zoomOut)
setCursorStyle(this._image, 'zoom-in')
this._image.setAttribute('data-action', 'zoom')
break
case 'zoom':
setCursorStyle(this._image, 'zoom-out')
this._image.setAttribute('data-action', 'close')
break
default:
break
}
this._image.removeEventListener('transitionend', this._handleTransitionEnd)
}
}
function setStyles(element, styles) {
for (var prop in styles) {
element.style[prop] = styles[prop]
}
}
function setCursorStyle(element, style) {
element.style.cursor = style
element.style.cursor = '-webkit-' + style
element.style.cursor = '-moz-' + style
}
document.addEventListener('DOMContentLoaded', function() {
new Zooming().init()
})
}()
<img src="https://img.alicdn.com/bao/uploaded/i1/1435205015500799928/TB2YGP.bncCL1FjSZFPXXXZgpXa_!!0-rate.jpg_40x40.jpg" data-action="zoom" src="https://img.alicdn.com/bao/uploaded/i1/1435205015500799928/TB2YGP.bncCL1FjSZFPXXXZgpXa_!!0-rate.jpg_400x400.jpg" />
<img src="https://img.alicdn.com/bao/uploaded/i1/1435205015500799928/TB2YGP.bncCL1FjSZFPXXXZgpXa_!!0-rate.jpg_40x40.jpg" data-action="zoom" src="https://img.alicdn.com/bao/uploaded/i1/1435205015500799928/TB2YGP.bncCL1FjSZFPXXXZgpXa_!!0-rate.jpg_400x400.jpg" />
发现在head文件里面有个base 域名的 导致这个不能正常运行，删除这个base标签就好了
用本地浏览器访问服务器。然后打开控制台调试工具，看看图片的资源有没有加载到。
如果加载到了，给js打个断点，看看js的执行过程。