atitit.html5动画特效----打水漂 ducks_and_drakes
atitit.html5动画特效----打水漂 ducks_and_drakes
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的更多相关文章
- ( 转 )超级惊艳 10款HTML5动画特效推荐
今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...
- 超级惊艳 10款HTML5动画特效推荐[转]
ylbtech_html5_demo 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现 ...
- 8款HTML5动画特效推荐源码
1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...
- 惊艳的HTML5动画特效及源码
今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...
- 8个WEB前端创意HTML5动画应用精选
和十几年前相比,现在的网页加入了很多动画元素,从之前的Flash到现在的HTML5,动画样式越来越丰富,动画制作也越来越便捷.本文精选了几款非常富有创意的HTML5动画应用,欣赏一下吧. 1.HTML ...
- 7款值得你心动的HTML5动画和游戏
1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...
- 10款很酷的HTML5动画和实用应用 有源码
10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...
- 难得一见的HTML5动画欣赏及源码下载
今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
随机推荐
- Windows环境下32位汇编语言程序设计(典藏版)
<Windows环境下32位汇编语言程序设计(典藏版) > 基本信息 作者: 罗云彬 出版社:电子工业出版社 ISBN:9787121207594 上架时间:2013-7-8 出版日期:2 ...
- 关于DeploymentConfig的思考
为什么是deploymentconfig而不是Kubernetes的deployment 在new-app的时候openshift直接创建了一个deploymentconfig并部署成rc,开始并不理 ...
- attribute用法
attribute 用法 摘要: 在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了_ ...
- 用google mock模拟C++对象
google mock是用来配合google test对C++项目做单元测试的.它依赖于googletest(参见我上篇文章<如何用googletest写单元测试>: http://blo ...
- window进入本地组策略编辑器和计算机管理界面
win+R 进入运行窗口 输入gpedit.msc 进入本地组策略编辑器, 右键我的电脑,点击管理 进入计算机管理界面
- scrapy-splash抓取动态数据例子三
一.介绍 本例子用scrapy-splash抓取今日头条网站给定关键字抓取咨询信息. 给定关键字:打通:融合:电视 抓取信息内如下: 1.资讯标题 2.资讯链接 3.资讯时间 4.资讯来源 二.网站信 ...
- centos 5.4中mysql主从同步配置方法
安装环境•centos 5.4•mysql 5.1.xx 采用rpm直接安装•xtrabackup 1.2.22 采用rpm直接安装1. Master:/etc/my.cnf 代码如下 复制代码 [ ...
- JMS之——ActiveMQ高可用+负载均衡集群
一.高可用集群 从ActiveMQ5.9开始,ActiveMQ的集群实现方式取消了传统的Master-Slave方式,增加了基于ZooKeeper+LevelDB的Master-Slave实现方式,其 ...
- zookeeper伪分布式集群安装
1.安装3个zookeeper 1.1创建集群安装的目录 1.2配置一个完整的服务 这里不做详细说明,参考我之前写的 zookeeper单节点安装 进行配置即可,此处直接复制之前单节点到集群目录 创建 ...
- Win8 Metro中文件读写删除与复制操作
Win8Metro中,我们不能在向以前那样调用WIN32的API函数来进行文件操作,因此,下面就来介绍一下Win8 Metro中文件的读写操作. 1 Windows 8 Metro Style App ...