Web前端案例_自定义动画

最新推荐文章于 2024-02-07 10:05:00 发布

晴天小风

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量1.5k

点赞数

分类专栏： JavaWeb笔记 Web前端笔记 Web前端案例文章标签： jquery 动画前端 java html

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/74936918

版权

JavaWeb笔记同时被 3 个专栏收录

41 篇文章 1 订阅

订阅专栏

Web前端笔记

31 篇文章 0 订阅

订阅专栏

Web前端案例

6 篇文章 1 订阅

订阅专栏

Web前端案例_自定义动画

一个关于前端自定义动画的案例

1.案例要求

利用jQuery制作自定义动画：

制作一个图片，宽度在1s内变到300px，然后换一张图，

然后，离左边距离和高度同时变化为100px和300px

然后，把图片在2s内变为圆形

2.案例分析

总共可以分为5步，一步一步进行实现

（1）首先显示一个图片

（2）让图片在1s内宽度变为300px

（3）切换一张图片

（4）离左边距离和高度同时变化为100px和300px

（5）把图片在2s内变为圆形

3.资料

animate动画参数：

（1）属性:数值 //给对应的属性设置目标值

（2）duration:时间 //动画执行的时间

（3）complete:回调函数 // 动画执行完调用的函数

4.代码解析

（1）使用img标签显示图片

（2）自定义animate动画，使用duration参数使图片1s内宽度变为300px

（3）在animate使用complete参数，回调函数执行图片的切换以及距离和高度

（4）使用border-radius属性以及duration参数，将图片在2s内变为圆形

5.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-2.0.2.min.js"></script>
		<style>
			
		</style>
		<script>
			/*	利用jQuery制作自定义动画：
				制作一个图片，宽度在1s内变到300px，然后换一张图，
				然后，离左边距离和高度同时变化为100px和300px
				然后，把图片在2s内变为圆形..*/
				$(function(){
					$("img").animate(
						{
							"width":"300px"
							
						},
						{
							"duration":1000,
							"complete":function(){
								$("img").attr("src","../img/3.jpg");
								$("img").css("height","300px");
								$("img").css("margin-left","100px");
								//$("img").css("margin-top","300px");
							}
						}
					).animate(
						{
							"border-radius":"150px"
						},
						{
							"duration":2000
						}
					);
				})
		</script>
	</head>
	<body>
		<img src="../img/4.jpg" height="100px" width="100px"/>
	</body>
</html>

6.截图展示

晴天小风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web前端案例_自定义动画

Web前端案例_自定义动画一个关于前端自定义动画的案例1.案例要求利用jQuery制作自定义动画：制作一个图片，宽度在1s内变到300px，然后换一张图，然后，离左边距离和高度同时变化为100px和300px然后，把图片在2s内变为圆形
复制链接

扫一扫