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

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

引入具体文件:

(function () {
var lastTime = ;
var vendors = ['webkit', 'moz'];
for (var x = ; 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(, - (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:!,vertex_Rtop:,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(!,{},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(!,e,{width:f.width(),height:f.height()});var h=Math.min(e.top,g.top)-Math.abs(e.left-g.left)/;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,)+Math.pow(e.left-g.left,)),j=Math.ceil(Math.min(Math.max(Math.log(i)/.-,),)/c.speed),k=e.top==h?:-Math.sqrt((g.top-h)/(e.top-h)),l=(k*e.left-g.left)/(k-),m=g.left==l?:(g.top-h)/Math.pow(g.left-l,);a.extend(!,c,{count:-,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===b.curvature?c.top+(g.top-c.top)*d/e:b.curvature*Math.pow(h-b.vertex_left,)+b.vertex_top;if(null!=g.width&&null!=g.height){var j=e/,k=g.width-(g.width-c.width)*Math.cos(j>d?:(d-j)/(e-j)*Math.PI/),l=g.height-(g.height-c.height)*Math.cos(j>d?:(d-j)/(e-j)*Math.PI/);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 ==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="data: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

最新文章

  1. User Growth Using Deeplink. (part1)
  2. C# 怎么才能取到网卡的型号信息呢? 如: 博通 NetLink BCM57781 Gigabit Ethernet
  3. bindService初步了解
  4. 超级详细的iptable教程文档
  5. List与Set的使用
  6. easyui中带checkbox框的tree
  7. Java多线程小结
  8. 深入了解jquery中的键盘事件
  9. 解决ie6 闪动的问题
  10. 二十八、oracle 视图
  11. Oracle基础--体系
  12. vue路由
  13. JDBC 程序实例小练习
  14. python中使用递归实现反转链表
  15. Java单例模式(Singleton)以及实现
  16. core的微服务相关
  17. c++ 实现拓扑排序
  18. Matlab入门笔记(1)
  19. 转:【专题四】自定义Web浏览器
  20. 检测锁及死锁详细信息,及sql语句

热门文章

  1. python__高级 : 类当作装饰器
  2. composer 使用中国镜像
  3. vue 改变我们插值的符号{{}}改为${}
  4. POJ:2377-Bad Cowtractors
  5. 笔记-python-语法-super
  6. salt demo 环境
  7. IAR FOR STM8S 错误 An error occurred while retrieving GDI features: gdi-error [40201]解决方法
  8. python面向对象的约束和自定义异常
  9. mysql5.6版本修改密码
  10. DPDK的代码规范