抛物线加入购物车的特效动画(支持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

clips 前端 js 动画 抛物线加入购物车的更多相关文章

  1. 前端js动画收藏

    值得收藏的动画

  2. clips 前端 js 单选按钮与输入框 的配合变化

    情形1: 一对单选按钮 一个输入框组 输入框组随单选按钮的改变而替换文字或执行其它 片段属于 介绍单选框的基本使用方式  : 1.单选框是有分类的,每个单选框有自己所属的组 从而一个页面可以拥有多组单 ...

  3. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  4. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  5. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  6. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  7. Web高性能动画及渲染原理(1)CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  8. 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  9. 解读前端js中签名算法伪造H5游戏加分

    信息安全在我们日常开发中息息相关,稍有忽视则容易产生安全事故.对安全测试也提出更高要求.以下是笔者亲自实践过程: 一. 打开某个数钱游戏HTML5页面,在浏览器 F12 开发工具中,查看的js,如下, ...

随机推荐

  1. kali linux渗透系统的安装

    Kali 安装详细步骤   实验环境 Windows:Windows 10 企业版 VMware:VMware Workstation 12 Pro Kali:kali-linux-2016.2-am ...

  2. 【word】html转doc的小研究

    html转doc,页眉页脚丢失 html 转 doc,是全屏铺满(缩放级别很高)

  3. python学习之数据类型与运算符号

    python版本:3.6 python编辑器:pycharm 最新版本 整理成代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- # 数学操作符 pr ...

  4. 数据结构学习-BST二叉查找树 : 插入、删除、中序遍历、前序遍历、后序遍历、广度遍历、绘图

    二叉查找树(Binary Search Tree) 是一种树形的存储数据的结构 如图所示,它具有的特点是: 1.具有一个根节点 2.每个节点可能有0.1.2个分支 3.对于某个节点,他的左分支小于自身 ...

  5. BFS例题:A计划

    ContribContrib/a11y/accessibility-menu.js 关于 BFS要点: 1.若为可化为的坐标系图形,可用结构体存储其x值,y值和步数.(一般开now 和 next ,n ...

  6. Bootstrap3适配IE8浏览器的方法

    <!--[if lte IE 8]> <script src="js/respond.min.js"></script> <script ...

  7. Windows下zookeeper注册中心的安装和启动

    zookeeper的安装支持单机模式和集群模式 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,当前稳定版本为3.4.8 单机模式 修改zoo ...

  8. 三层还是DDD,ORM还是Ado.Net,何去何从?

    我本想把这个问题放到博问去,前几次有去博问问过之类的问题,无奈大神们可能都不屑回答别人的低级问题.所以放到随笔里,一方面把自己对ORM.架构的一些看法写下来抛砖引玉,另一方面最主要的是想寻求大神们指指 ...

  9. 在SqlServer中通过SQL语句实现树状查询

    CREATE PROCEDURE [dbo].[GetTree] @Id int AS BEGIN with cte as ( as lvl from Entity where Id = @Id un ...

  10. 常用模块(sys)

    import sys# sys.argv() # 命令参数List,第一个元素是程序本身路径,如:python test.py run db# sys.exit('shh') # 退出程序,正常退出时 ...