Web前端案例_自定义动画
来源:互联网 发布:网络教育9月几号入学 编辑:程序博客网 时间:2024/06/04 21:00
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 0
- Web前端案例_自定义动画
- Web前端案例_正则表达式案例
- Web前端案例_多选练习案例
- JQuery 自定义动画案例
- 前端 案例 实战(web )
- Web前端_图片旋转
- web前端_学习汇总
- Android动画案例(五)布局动画与自定义动画
- web前端中calc属性案例详解
- web前端开源小案例:立方体旋转
- Web前端案例_QQ登录界面实现
- web前端案例:贪吃蛇小游戏
- 安卓自定义view动画案例
- 【web案例】赵雅智_校验验证码
- Android十个小案例动画,自定义View动画实现,ValueAnimator
- Web前端_邮箱的正则表达式
- web前端(001_滚动效果)
- web前端_原生js_全选功能
- 第一次数据抓取
- ERP&EIRP
- ThinkPHP3.2.2-发送邮件
- 2017中科大信息安全课程总结三
- 各种学习资料库,非常好的收藏汇总!!!!!
- Web前端案例_自定义动画
- malloc与new的区别
- 考试/比赛模板
- (转载)公共技术点之 Java 反射 Reflection
- vb.net 教程 4-4 目录操作 Directory 2
- halcon学习之Region的选择处理与信息的多样化显示
- C++动态类型与静态类型
- HTML页面左侧菜单栏切换实现右侧主体内容改变
- 堆