用JavaScript实现图片缓慢缩放效果

最新推荐文章于 2022-08-04 17:06:03 发布

七七看起来萌萌哒

最新推荐文章于 2022-08-04 17:06:03 发布

阅读量957

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/az_77/article/details/51800812

版权

（本文是慕课网课程文档整理，课程地址http://www.imooc.com/learn/80）

实现效果：

点击放大/减小按钮，图片进行相应的缩放，缩放到一定尺寸，不再缩放。（图片来自百度）

实现：

图片缓慢缩放，在一定程度上可以看做循环运行某段函数，因此，利用setInterval()定时器实现。

页面代码：

<span style="white-space:pre">	</span><div class = "content">
		<img src = "test.jpg" id = "img">
		<div>
		  <input type="button" id = "max" value = "放大">
		  <input type="button" id = "min" value = "减小">
		</div>
	<div>

居中利用margin：auto，但是不要忘了设置宽度。

js实现：

利用setInterval定时器来操作。

<!DOCTYPE html>
<html>
<head

最低0.47元/天解锁文章

七七看起来萌萌哒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现图片缓慢缩放效果

（本文是慕课网课程文档整理，课程地址http://www.imooc.com/learn/80）实现效果：点击放大/减小按钮，图片进行相应的缩放，缩放到一定尺寸，不再缩放。（图片来自百度）实现：图片缓慢缩放，在一定程度上可以看做循环运行某段函数，因此，利用setInterval()定时器实现。页面代码：居中利用
复制链接

扫一扫