js实现单击图片放大图片的方法

JavaScript016

js实现单击图片放大图片的方法,第1张

这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

用JavaScript实现图片点击放大再次点击恢复代码如下:

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

拓展内容:

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

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

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

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

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