图片img或者含有img元素拖拽时,或者用scale缩放时产品的阴影效应问题
html中有图片img或者含有img元素拖拽时,或者scale缩放时产品的阴影效应问题,也就是图片重影,
另外使用scale缩放图片时可能产生放大后图片模糊情况,文章也给出了解决方案
解决方案如下:
效果图:
<div>
<img src=""/>
</div>
1. 拖拽图片时产生阴影
例如如上代码,在拖动图片会出现重影;如果是添加JS代码实现拖拽功能,则在鼠标按下onmousedown事件内添加event.preventDefault(); 取消默认行为,防止图片阴影效应
el.onmousedown = (e) => {
cancelHandler(e);
}
//封装了一个取消默认事件的函数,用来兼容老IE
function cancelHandler(event){
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
2. scale缩放图片时产生阴影
错误的缩放写法:
let scaleNum = 1.2;
document.getElementById("bigImg").style.transform = 'scale(' + scaleNum+ ')';
正确的缩放写法:(scale必须加translateZ(0) 防止出现放大后会模糊)
let scaleNum = 1.2;
document.getElementById("bigImg").style.transform = 'translateZ(0) scale(' + scaleNum+ ')';