JS实现鼠标移动到缩略图显示大图的图片放大效果 – CSS – 前端 css文件中文

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：