Web前端案例_自定义动画

男娘i 2022-06-12 00:22 275阅读 0赞

**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.截图展示

![Center][]

[Center]: /images/20220612/c384b0a786db44bcbb5d9be05a2b41a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 Cesium自定义动画

在Cesium中，我想做一个半径动态增大和缩小的圆。一开始我考虑使用`requestAnimationFrame`，不断的调整半径的大小，也就是直接更改`Ellipsoid`对

谁借莪１个温暖的怀抱￠/ 2022年12月08日 05:10/ 0 赞/ 288 阅读

相关 jQuery自定义动画

使用animate()来完成比如： 1.逐渐扩大 1）宽高都扩为200px 2)宽先阔为200px,高后扩为200px 2移动到指定位置 1）移动到（

短命女/ 2022年12月03日 13:27/ 0 赞/ 209 阅读

相关自定义 Android 过场动画

自定义 AndroidActivity 转场动画在 Android 5.0上 google 官方给我提供了不少好看方便使用的专场动画原生提供的普通转场动画 \-

阳光穿透心脏的1/2处/ 2022年09月21日 01:48/ 0 赞/ 216 阅读

相关自定义View--操作动画

![这里写图片描述][20150527114846906] 计算 ![这里写图片描述][20150527134301659] ![这里写图片描述][2015052

不念不忘少年蓝@/ 2022年08月05日 00:49/ 0 赞/ 198 阅读

相关 Web前端案例_正则表达式案例

Web前端案例\_正则表达式案例 > 这篇写关于一个正则表达式以及表单结合的案例。 1.案例说明 > 案例：利用正则表达式写一个表单验证 > > 用户名：10-15位的

阳光穿透心脏的1/2处/ 2022年06月13日 09:59/ 0 赞/ 181 阅读

相关 Web前端案例_多选练习案例

Web前端案例\_多选练习案例 > 关于多选框的checked属性以及span标签的innerhtml属性的练习。 1.案例分析 > 利用多选框的checked属性以及s

￡神魔★判官ぃ/ 2022年06月13日 09:58/ 0 赞/ 164 阅读

相关 Web前端案例_自定义动画

Web前端案例\_自定义动画 > 一个关于前端自定义动画的案例 > > > 1.案例要求 > 利用jQuery制作自定义动画： > > 制作一个图片，宽

男娘i/ 2022年06月12日 00:22/ 0 赞/ 276 阅读

相关自定义动画烟花

/ Created by ylwang on 2017/8/10. / public class LineView extends View {

「爱情、让人受尽委屈。」/ 2022年06月09日 13:35/ 0 赞/ 216 阅读

相关自定义窗口动画

自定义窗口进入动画： Animation Resources xml动画资源语法：[https://developer.android.google.cn/guide/top

末蓝、/ 2022年03月12日 02:40/ 0 赞/ 283 阅读

相关 vue第二天 ---案例+过滤器+自定义指令+生命周期+动画

1：品牌管理案例增加+删除+搜索页面布局：面板+列表用到了panel panel-primary ，panel-heading,panel-body(label

Bertha 。/ 2021年09月19日 10:16/ 0 赞/ 277 阅读