谷歌放大图片插件效果

版权声明：solo https://blog.csdn.net/sansan_7957/article/details/83787898

插件的效果是鼠标移到图片上图片放大，移开缩小。用 mouseover 和 mouseout 事件，因为要给网页上所有图片添加这种效果所以事件要加在 document 上：

// 鼠标移上图片放大
document.getElementsByTagName('body')[0].onmouseover = (e) => {
    if (e.target.nodeName.toUpperCase() === 'IMG' && !document.getElementById('hoverImage')) {
    	// 创建 DOM 并添加属性
	   let _div = document.createElement('div')
	   _div.id = 'hoverImage'
	   _div.style = 'pointer-events: none; position: fixed; z-index: 123456789; padding: 2px; background: #fff; border: 2px solid #ccc; border-radius: 5px;'
	   _div.style.left = e.clientX + 10 + 'px'
	   
	   let _img = document.createElement('img')
	   _img.src = e.target.src
	   _img.style = 'display: block;'
	   
		// 这里是根据图片的长宽比跟屏幕长宽比来决定图片的大小，不然会出现图片被挡住的情况
	   if (e.target.clientWidth / e.target.clientHeight <= (window.innerWidth - e.clientX) / window.innerHeight) {
		    _img.style.height = window.innerHeight - 30 + 'px'
		    _img.style.width = 'auto'
		    _div.style.bottom = '20px'
	   } else {
		     _img.style.width = window.innerWidth - e.clientX - 40 + 'px'
		     _img.style.height = 'auto'
		     _div.style.bottom = '20px'
		     // _div.style.top = e.clientY + 10 + 'px'
	   }

		_img.onload = () => {
			 _div.appendChild(_img)
			 document.getElementsByTagName('body')[0].appendChild(_div)
		}
    }
}

document.getElementsByTagName('body')[0].onmouseout = (e) => {
	if(e.target.nodeName.toUpperCase() === 'IMG' && document.getElementById('hoverImage')) {
		document.getElementsByTagName('body')[0].removeChild(document.getElementById('hoverImage'))
	}
}

pointer-events: none; 是解决图片的闪烁问题

以上。