在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）

JavaScript017

在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）,第1张

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

具体代码实现如下：

<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="width:100pxheight: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 事件参考手册

您好，以下几种方法可以参考：

给每个图片的标签给一个统一的类名，然后对该类名进行设置固定宽高；

给每一个img标签添加内联属性，style="width: height: "

用js获取到所有的img标签。obj.style = "width: height: "