javaScript实现图片的放大和缩小

在这里我们带领大家来使用javaScript实现图片的放大和缩小。实现的效果图如下

点击放大按钮，图片会放大，当放大到一定程度的时候，图片不能再放大，会弹出一个提示框，不能再放大了，点击缩小按钮，图片会缩小，当缩小到一定程度的时候，图片不能再缩小，会弹出一个提示框，不能再缩小了。

下面我们先来实现界面的布局。

点击按钮图片进行缩放，可以看出需要将图片和按钮放置在一个div里面。

布局代码如下：

1、实现点击放大按钮，图片放大

 

实现分为以下几步：

1.获取放大按钮以及图片

通过getElementById方法获取放大按钮以及图片，然后设置按钮的点击事件onclick。

2.实现放大按钮的onclick事件

在该事件中，需要设置图片每次点击后的宽度和高度，设置为该图片本身宽度和高度的1.2倍，实现代码如下

var endW=image.width*1.2;//每次点击后的宽度

var endW=image.width*1.2;//每次点击后的高度

这里需要设置定时器，每隔20ms，图片放大一次，此时需要判断，如果图片的宽度小于endW，点击放大按钮的时候，图片宽度和高度每次增大1.05倍否则。但是这样的话点击放大按钮时，图片会无限制放大。

3.限制图片放大

设置图片放大的极限值，分别为图片宽度和高度的2倍

var maxW=image.width*2;//放大宽度的极限值

var maxH=image.height*2;//放大高度的极限值

在判断的时候加入当图片的宽度小于极限值的时候，图片放大，否则弹出对话框“图片不能再放大”

2、实现点击缩小按钮，图片缩小

实现原理和放大类似。这里将代码贴出来，大家可以认真看一下

完整代码