本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<title>单击图片即可放大图片</title>
<body>
点击图片预览效果。<br>
<img
src="/images/m01.jpg"
onclick="this.width+=50this.height+=50"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
<img
src="/images/m02.jpg"
onclick="this.style.zoom='2'"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：
2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：
3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：
用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：
HTML 代码：
<img src='../1.jgp' id='img' />这个时候img的图片自身是多大，就会显示多大。100px*100px的图。
js代码：
var oImg = document.getElementById('img')oImg.width = '50px' //当给img标签的宽度设置为50px后，高度会自动按比例缩小。
oImg.width = '200px' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。
