易优内容页图片点击变大效果，看本站效果即可

2021-01-18 11:44:24 学习园地

大家好，小秋分享一段易优内容页里面的点击图片放大为全屏的效果，很多做站的时候，我们会发现有的模板文章内容页里面的图片，前台打开的时候就只有静态一样跟内容一样沉在网页上，有的图片很小，眼睛不好的也很难看清图片，我们不仅仅是为了充实网站内容，而是让用户更能的阅读我们网站文章内容，这样网站才能有更好的潜质用户。所以我就简单的分享一段JS 代码。喜欢的自己收藏吧！

JS部分（底部文件footer.htm）

<script>
+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('data-original')
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 data-original 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('div')
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()
})
}()
</script>

html页

请在img标签里面增加：

data-action="zoom"

比如

<img src="" data-action="zoom"

效果如下：

易优程序 JS应用部分：

将以上代码新建一个js文件记得上面部分头尾去掉<script></script>

文件保存在 \template\pc\skin\js目录里面

内容页

易优内容页图片点击变大效果，看本站效果即可(图2)

以上全部打开添加

这段代码在<herd>上面代码</head>中间

但是要打开易优内容编辑器img图片增加我们JS标记的部分方法请传送门到这个文章：易优内容（百度）编辑器图片img标签里修改alt或者title属性教程

增加以下代码即可

//追加data-action="zoom"属性
$altNew = data-action."zoom";
$imgstrNew = preg_replace('/data-action(\s*)=(\s*)[\'|\"]('.$imgname.')?[\'|\"]/i', 'data-action="'.$altNew.'"', $imgstrNew);
if (!preg_match('/<img(.*?)data-action(\s*)=(\s*)[\'|\"](.*?)[\'|\"](.*?)[\/]?(\s*)>/i', $imgstrNew)) {
// 新增alt属性
$imgstrNew = str_ireplace('<img', "<img data-action=\"zoom\" ", $imgstrNew);
}

如果是懒人或者新手就直接下载文件吧