clips 前端 js 动画 抛物线加入购物车

抛物线加入购物车的特效动画(支持ie7以上,移动端表现良好)
1.引用一个极小的jquery插件库
2.启动 设置 起点 终点 和完成后回调函数

1.插件地址 git-hub上的官方主页 https://github.com/amibug/fly
引入具体文件:

(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame){
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());

/*! fly - v1.0.0 - 2014-12-22
* https://github.com/amibug/fly * Copyright (c) 2014 wuyuedong; Licensed MIT */
!function(a){a.fly=function(b,c){var d={version:"1.0.0",autoPlay:!0,vertex_Rtop:20,speed:1.2,start:{},end:{},onEnd:a.noop},e=this,f=a(b);e.init=function(a){this.setOptions(a),!!this.settings.autoPlay&&this.play()},e.setOptions=function(b){this.settings=a.extend(!0,{},d,b);var c=this.settings,e=c.start,g=c.end;f.css({marginTop:"0px",marginLeft:"0px",position:"fixed"}).appendTo("body"),null!=g.width&&null!=g.height&&a.extend(!0,e,{width:f.width(),height:f.height()});var h=Math.min(e.top,g.top)-Math.abs(e.left-g.left)/3;h<c.vertex_Rtop&&(h=Math.min(c.vertex_Rtop,Math.min(e.top,g.top)));var i=Math.sqrt(Math.pow(e.top-g.top,2)+Math.pow(e.left-g.left,2)),j=Math.ceil(Math.min(Math.max(Math.log(i)/.05-75,30),100)/c.speed),k=e.top==h?0:-Math.sqrt((g.top-h)/(e.top-h)),l=(k*e.left-g.left)/(k-1),m=g.left==l?0:(g.top-h)/Math.pow(g.left-l,2);a.extend(!0,c,{count:-1,steps:j,vertex_left:l,vertex_top:h,curvature:m})},e.play=function(){this.move()},e.move=function(){var b=this.settings,c=b.start,d=b.count,e=b.steps,g=b.end,h=c.left+(g.left-c.left)*d/e,i=0==b.curvature?c.top+(g.top-c.top)*d/e:b.curvature*Math.pow(h-b.vertex_left,2)+b.vertex_top;if(null!=g.width&&null!=g.height){var j=e/2,k=g.width-(g.width-c.width)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2),l=g.height-(g.height-c.height)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2);f.css({width:k+"px",height:l+"px","font-size":Math.min(k,l)+"px"})}f.css({left:h+"px",top:i+"px"}),b.count++;var m=window.requestAnimationFrame(a.proxy(this.move,this));d==e&&(window.cancelAnimationFrame(m),b.onEnd.apply(this))},e.destory=function(){f.remove()},e.init(c)},a.fn.fly=function(b){return this.each(function(){void 0==a(this).data("fly")&&a(this).data("fly",new a.fly(this,b))})}}(jQuery);

lib.js
　2.启动动画　　

.flyer{
position: fixed;
z-index: 999;
width: 20px;
height: 20px;
}
//设置z-index让元素显示在最前面以免被覆盖

//结束点(浮动的底部栏)  所以获取endedY为当前屏幕高度
var endedY=$(window).height();
var endedX = $('#end').offset();

var flyer = $('<img class="flyer" src="images/plus_circle.png" />');
//或者flyer=$('#fly');  选页面某个想要飞翔的元素也可以

$(body).on('click','.plus_circle',function(e){
flyer.fly({
start: {
left: e.clientX-15,
top: e.clientY-15
},
end: {
left:offset.left,
top:endedY-30,
width: 20,
height: 20
},
onEnd:function(){
this.destory();
//完成后销毁实例，移除dom,不销毁flyer会一直停留在它的终点
}
});

});

　直接演示：http://codepen.io/hzxs1990225/full/ogLaVp

　　note:

　　1.对于事件的定位：　　

function(event){
event.pageX;event.pageY;

event.screenX;event.screenY;

event.clientX;event.clientY;
}

　　　　screenX:鼠标位置相对于用户屏幕水平偏移量 会算上浏览器导航栏

clientX:参照点是浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动

pageX:(不支持ie78,9以上ok)参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动(就如单词page而言,始终是对应页面的位置)

所以页面内容过长超过了页面高度，出现了滚动条时，获取出发点的相对于屏幕的坐标 使用clientX

原理为：
var doc = document.documentElement,body=document.body;
pageX = clientX + Math.max(doc.scrollLeft,body.scrollLeft);
pageY = clientY + Math.max(doc.scrollTop,body.scrollTop);

顺带一提还有不常用不适用的offsetX 和layerX
offsetX：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。IE以内容区域开始,鼠标向上进入border将出现负值。

layerX：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点

具体的浏览器支持对比为
offsetX/offsetY： W3C- IE+ Firefox- Opera+ Safari+ chrome+
x/y： W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY： W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY： W3C- IE- Firefox+ Opera+ Safari+ chrome+
clientX/clientY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
screenX/screenY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

2.对于元素的定位

　 获取当前窗口可视区域的高度(当前手机屏幕的高度）$(window).height()

$(document).height()); //浏览器当前窗口文档的高度
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin
同理宽度换用width

var end = $('#end').offset(); end.left; end.top;
元素相对于页面上的位置(参照物和事件触发的pageX参照物同理)
所以这里有一些需要考虑的问题：若该元素是fixed定位的(比如说顶部栏和底部栏,一旦页面出现滚动条)
滚动时end.top会不断增加，相对屏幕的左上角位置是end.top-scrollTop
或者不依据元素定位而根据当前可视区域高度自己去增减为当前fixed元素在屏幕上位置，做到始终跟随

顺便放一些原生dom对象的一些参数
网页可见区域宽： document.body.clientWidth
　　网页可见区域高： document.body.clientHeight
　　网页可见区域宽： document.body.offsetWidth (包括边线的宽)
　　网页可见区域高： document.body.offsetHeight (包括边线的高)
　　网页正文全文宽： document.body.scrollWidth
　　网页正文全文高： document.body.scrollHeight
　　网页被卷去的高： document.body.scrollTop
　　网页被卷去的左： document.body.scrollLeft
　　网页正文部分上： window.screenTop
　　网页正文部分左： window.screenLeft
　　屏幕分辨率的高： window.screen.height
　　屏幕分辨率的宽： window.screen.width
　　屏幕可用工作区高度： window.screen.availHeight
　　屏幕可用工作区宽度： window.screen.availWidth