atitit.html5动画特效----打水漂 ducks_and_drakes
来源:互联网 发布:病例证明制作软件 编辑:程序博客网 时间:2024/05/12 22:12
atitit.html5动画特效----打水漂 ducks_and_drakes
1. 原理 1
2. fly jquery插件 1
3. ---------code 2
4. 参考 4
1. 原理
使用多重抛物线的原理即可。
.
作者:: 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
2. fly jquery插件
script src="jquery.js"></script>
<script src="dist/jquery.fly.min.js"></script>
<script>
jQuery(function($) {
$('#fly').fly({
start:{
left: 11, //开始位置(必填)#fly元素会被设置成position: fixed
top: 600, //开始位置(必填)
},
end:{
left: 500, //结束位置(必填)
top: 130, //结束位置(必填)
width: 100, //结束时高度
height: 100, //结束时高度
},
autoPlay: false, //是否直接运动,默认true
speed: 1.1, //越大越快,默认1.2
vertex_Rtop:100, //运动轨迹最高点top值,默认20
onEnd: function(){} //结束回调
});
$('#fly').play(); //autoPlay: false后,手动调用运动
$('#fly').destroy(); //移除dom
});
</script>
IE10以下,引入src/requestAnimationFrame.js
IE10以下,引入src/requestAnimationFrame.js
注意的地方::只能抛出一次的解决
$("#stone").data('fly',null);
3. ---------code
prj。vod2
function ducks_and_drakes()
{
var times=5;
// var perHiReduce=0.9;
var perFarReduce=0.85;
var start_left=screen.width;
// var end_left=1000;
var start_top=300;
// var end_top=500;
// var cur_hi=0;
// var cur_left=0;
var first_step_len=500;
// var last_stepLen=100;
// var first_step_hi=80;
var sec_left;
var sec_left_step;
function fadeInX(objs,i)
{
if(i>times)
{
console.log("--end");
return;
}
// last_left=cur_left;
sec_left_step= first_step_len*(perFarReduce);
sec_left=start_left-sec_left_step;
console.log("---start_left"+start_left+" sec-left:"+sec_left);
//'<img class="test" src="pic.jpg"></img>'
// static
// $("#stone").css("position","static");
console.log( $("#stone"));
var flyobj= $("#stone").fly({
start: {top: start_top, left: start_left},
end: {top: start_top, left: sec_left },
speed: 1.8,
autoPlay: true, //def is true
// vertex_Rtop:100,
onEnd: function(){
// alert('End');
start_left=sec_left;
first_step_len=sec_left_step;
console.log("---next :"+start_left+">>++"+first_step_len);
$("#stone").data('fly',null);
// setTimeout(function() {
fadeInX(objs,i+1);
// }, 500 );
// this.destory();
}
}); //end fly
// alert(obj);
// console.log(obj);
// console.log(flyobj);
// flyobj.play();
}
fadeInX(null,1);
}
4. 参考
基于jquery.fly模仿天猫抛物线加入购物车特效代码_懒人之家.htm
更多详细内容可参考作者github:https://github.com/amibug/fly
- atitit.html5动画特效----打水漂 ducks_and_drakes
- css3 html5动画特效
- Flash HTML5动画特效
- HTML5 Canvas宇宙星云动画特效
- 8款HTML5动画特效推荐源码
- 惊艳的HTML5粒子动画特效
- html5+css+js实现动画特效,人物动画
- 【動態規劃】打水漂
- [rqnoj145]打水漂
- 6 个迷人而令人惊叹的 HTML5 动画特效
- HTML5+jQuery制作温馨浪漫爱心表白动画特效
- 分享8款令人惊叹的HTML5 Canvas动画特效
- 精选6款神奇的HTML5 Canvas动画特效
- HTML5+jQuery制作温馨浪漫爱心表白动画特效
- 极品特效HTML5动画推荐,不看的程序员后悔一辈子
- 10款让人惊叹的HTML5/jQuery图片动画特效
- html5炫酷购物车结算动画特效
- 12种炫酷html5 svg加载loading动画特效
- TabHost 和 FragmentTabHost
- jQuery设计思想
- atitit.ajax上传文件的实现原理 与设计
- atitit.信息系统方案规划 p71.doc
- Javascript异步编程的4种方法
- atitit.html5动画特效----打水漂 ducks_and_drakes
- 实现Tab功能的几种方式
- JIRA6.3.6 安装汉化破解指南
- Wildcard Matching
- UVA 11997 - K Smallest Sums 优先队列
- JAVA基础-网络编程
- 课程实训——银行储蓄系统
- UVALive - 3644 X-Plosives 并查集
- funny makeup story