怎么用js实现图片点击时放大,再点击恢复

JavaScript040

怎么用js实现图片点击时放大,再点击恢复,第1张

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

知识拓展:

JavaScript 是目前所有主流浏览器上唯一支持的脚本语言,这也是早期JavaScript的唯一用途。其主要作用是在不与服务器交互的情况下修改HTML页面内容,因此其最关键的部分是DOM(文档对象模型),也就是HTML元素的结构。

通过Ajax可以使HTML页面通过JavaScript,在不重新加载页面的情况下从服务器上获取数据并显示,大幅提高用户体验。通过JavaScript,使Web页面发展成胖客户端成为可能。

1、点击JavaScript图片。

2、通过点击之中换成img的src属性。

3、换成属性之后,将图片设置成动画形式放大原来的1.5倍。

4、在设置中找到动画时间,将动画时间设为3秒即可。

这篇文章主要介绍了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程序设计有所帮助。