История развития
var imgs = document.querySelectorAll("img.main-page-img"); Array.prototype.forEach.call(imgs, function(img) {
img.style.position = "relative"; img.style.top = "0"; img.style.left = "0"; img.style.width = "100%"; img.parentNode.onmouseover = function() { this.style.boxShadow = "0 0 5px 5px #555"; }; img.parentNode.onmouseout = function() { this.style.boxShadow = "0 0 5px 5px #999"; }; img.isCentered = false; var measurer;
img.onclick = function() { if (this.isCentered) { this.isCentered = false; measurer.style.opacity = "0"; img.style.position = "relative"; img.style.top = "0"; img.style.left = "0"; img.style.width = "100%"; this.style.zIndex = "auto"; img.parentNode.onmouseover = function() { this.style.boxShadow = "0 0 5px 5px #555"; }; img.parentNode.onmouseout = function() { this.style.boxShadow = "0 0 5px 5px #999"; }; setTimeout(function() { document.body.removeChild(measurer); }, 500); } else { measurer = document.createElement("div"); measurer.style.cssText = "margin: 0; padding: 0; outline: 0; border: 0; background-color: transparent;\ display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; transition: all 0.4s ease;"; document.body.appendChild(measurer); var screenWidth = measurer.offsetWidth, screenHeight = measurer.offsetHeight; measurer.style.backgroundColor = "black"; measurer.style.opacity = "0.6"; this.style.position = "fixed"; this.style.zIndex = "1000000"; this.style.boxShadow = "0 0 10px 5px #DDD"; this.style.left = (screenWidth - this.naturalWidth) / 2 + "px"; this.style.top = (screenHeight - this.naturalHeight) / 2 + "px"; this.style.width = this.naturalWidth + "px"; this.parentNode.style.boxShadow = "0 0 5px 5px #999"; this.parentNode.onmouseover = function() { return false; }; this.parentNode.onmouseout = function() { return false; }; this.isCentered = true; } }; });
Свежие комментарии