在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)

如题所述

第1个回答  2022-11-16

分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。

具体代码实现如下:

<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="width:100px;height:100px;" />

<script type="text/javascript"> 

var img = document.getElementById('img'); 

function bigger(){
 img.style.width = '400px';
 img.style.height = '400px';

function smaller(){
 img.style.width = '100px';
 img.style.height = '100px';
}

</script>

扩展资料:

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

参考资料:

JavaScript官方API接口-GlobalEventHandlers.onmouseover

JavaScript官方API接口-GlobalEventHandlers.onmouseout

W3cSchool-JavaScript 事件参考手册