图片放大效果可以通过CSS的缩放属性实现,如下所示:
img:hover {
transform: scale(1.5);
}
这样当鼠标移到图片上时,图片会放大1.5倍。如果需要动画效果,可以加上transition属性。
如果需要使用JavaScript来实现图片放大效果,可以通过修改图片的width和height属性实现。具体代码如下所示:
var img = document.getElementById("myImg");
img.onmouseover = function() {
this.style.width = (this.clientWidth*1.5) + "px";
this.style.height = (this.clientHeight*1.5) + "px";
}
img.onmouseout = function() {
this.style.width = (this.clientWidth/1.5) + "px";
this.style.height = (this.clientHeight/1.5) + "px";
}
这样当鼠标移到图片上时,图片会放大1.5倍,鼠标移出时则恢复原样。需要注意的细节有:使用clientWidth和clientHeight来获取图片的宽度和高度,以避免因图片的padding和border导致的计算错误;需要将图片的width和height属性设置为初始值,以保证图片的比例不会发生变化。