点击上方“蓝字”关注本公众号 JavaScript实现图片的放大和缩小 ○ 在这里我们带领大家来使用javaScript实现图片的放大和缩小。实现的效果图如下 点击放大按钮，图片会放大，当放大到一定程度的时候，图片不能再放大，会弹出一个提示框，不能再放大了，点击缩小按钮，图片会缩小，当缩小到一定程度的时候，图片不能再缩小，会弹出一个提示框，不能再缩小了。 下面我们先来实现界面的布局。 点击按钮图片进行缩放，可以看出需要将图片和按钮放置在一个div里面。 布局代码如下： 1、实现点击放大按钮，图片放大 实现分为以下几步： 1.获取放大按钮以及图片 通过getElementById方法获取放大按钮以及图片，然后设置按钮的点击事件onclick。 2.实现放大按钮的onclick事件 在该事件中，需要设置图片每次点击后的宽度和高度，设置为该图片本身宽度和高度的1.2倍，实现代码如下 varendW=image.width*1.2;//每次点击后的宽度 varendW=image.width*1.2;//每次点击后的高度 这里需要设置定时器，每隔20ms，图片放大一次，此时需要判断，如果图片的宽度小于endW，点击放大按钮的时候，图片宽度和高度每次增大1.05倍否则。但是这样的话点击放大按钮时，图片会无**放大。 3.**图片放大 设置图片放大的极限值，分别为图片宽度和高度的2倍 varmaxW=image.width*2;//放大宽度的极限值 varmaxH=image.height*2;//放大高度的极限值 在判断的时候加入当图片的宽度小于极限值的时候，图片放大，否则弹出对话框“图片不能再放大” 2、实现点击缩小按钮，图片缩小 实现原理和放大类似。这里将代码贴出来，大家可以认真看一下。
完整代码
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
