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的更多相关文章

  1. ( 转 )超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...

  2. 超级惊艳 10款HTML5动画特效推荐[转]

    ylbtech_html5_demo 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现 ...

  3. 8款HTML5动画特效推荐源码

    1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...

  4. 惊艳的HTML5动画特效及源码

    今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...

  5. 8个WEB前端创意HTML5动画应用精选

    和十几年前相比,现在的网页加入了很多动画元素,从之前的Flash到现在的HTML5,动画样式越来越丰富,动画制作也越来越便捷.本文精选了几款非常富有创意的HTML5动画应用,欣赏一下吧. 1.HTML ...

  6. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  7. 10款很酷的HTML5动画和实用应用 有源码

    10款很酷的HTML5动画和实用应用,这里有菜单.SVG动画.Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧. 1.HTML5 SVG ...

  8. 难得一见的HTML5动画欣赏及源码下载

    今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...

  9. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

随机推荐

  1. openssh相关

    openssh相关    DSA RSA,非对称加密,产生公钥.私钥,前者存放在remote,后者存放在local,ssh-keygen产生公钥私钥时,提示输入私钥密码,防止私钥泄露被盗    ssh ...

  2. Vue打包项目图片等静态资源的处理

    项目打包,默认是打包在根目录下面的.当然我们可以通过设置,打包到任意子目录中去. 但是,当项目中引入资源的,比如:引入图片资源.js资源.或者字体图标之类的.那么可能在这个中间又会踩坑. 1.在vue ...

  3. 实现自动文本摘要(python,java)

    参考资料:http://www.ruanyifeng.com/blog/2013/03/automatic_summarization.html http://joshbohde.com/blog/d ...

  4. Python爬虫之一 PySpider 抓取淘宝MM的个人信息和图片

    ySpider 是一个非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇通过做一个PySpider 项目,来理解 Py ...

  5. 关于windows下自带的forfile批量删除文件bat命令

    最近在开发的过程中,为了节省资源,需要用到windows下批量删除文件的批处理命令,也就是bat 主要内容: forfiles /p "E:\pictures" /m * /d - ...

  6. [Android Pro] 调用系统相机和图库,裁剪图片

    private static final int PHOTO_REQUEST_TAKEPHOTO = 1;// 拍照 private static final int PHOTO_REQUEST_GA ...

  7. in_array() 和array_search的区别

    在判断字符串是否在某个数组里面的时候,我们会经常用到in_array()和array_search这两个函数. 他们的用法都是在数组中搜索给定的值,但是不同的是, in_array()给定的值 val ...

  8. 云计算之路-试用Azure:一次失败的SQL Server向SQL Azure的迁移尝试

    如果数据库用的是SQL Server,那SQL Azure无疑是最吸引人的地方之一.在测试了虚拟机磁盘IO之后,我们迫不急待地进行了SQL Azure的测试. (一) 首先进入manage.windo ...

  9. JMS与Spring之一(用JmsTemplate同步收发消息) --转

    转自:http://blog.csdn.net/moonsheep_liu/article/details/6683190

  10. 优化SQL Server的内存占用之执行缓存

    在论坛上常见有朋友抱怨,说SQL Server太吃内存了.这里笔者根据经验简单介绍一下内存相关的调优知识   首先说明一下SQL Server内存占用由哪几部分组成.SQL Server占用的内存主要 ...