添加商品,让商品飞入购物车特效
2017-04-20 15:38
162 查看
需要的js库:
1、jquery
2、jquery.fly.min.js
3、requestAnimationFrame.js(兼容IE需要用到)
源码:
文件:
1、jquery.fly.min.js:
2、requestAnimationFrame.js:
1、jquery
2、jquery.fly.min.js
3、requestAnimationFrame.js(兼容IE需要用到)
源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } a{ position: absolute; right: 100px; top: 10px; } </style> </head> <body> <a href="#">我的购物车</a><br /> <img src="1.png"/> <br /> <button>加入购物车</button> </body> <script type="text/javascript" src="../js/jquery.min.js" ></script> <script type="text/javascript" src="jquery.fly.min.js" ></script> <!-- 兼容IE10 --> <script type="text/javascript" src="requestAnimationFrame.js" ></script> <script> $(function(){ var cartLeft = $('a').offset().left - $(document).scrollTop(); // 获取a标签距离屏幕顶端的距离(因为fly插件的start开始位置是根据屏幕可视区域x,y来计算的,而不是根据整个文档的x,y来计算的) var cartTop = $('a').offset().top; // 获取a标签的y坐标 var btnLeft = $('button').offset().left - $(document).scrollTop(); var btnTop = $('button').offset().top; $("button").click(function(event){ var addcar = $('button'); var img = addcar.siblings('img').attr('src'); var flyer = $('<img class="u-flyer" src="'+img+'">'); flyer.fly({ start: { left: btnLeft, top: btnTop }, end: { left: cartLeft, //结束位置(必填) top: cartTop, //结束位置(必填) width: 0, //结束时宽度 height: 0 //结束时高度 }, onEnd: function(){ //结束回调 console.log('加入成功!'); this.destory(); //移除dom } }); }); }) </script> </html>
文件:
1、jquery.fly.min.js:
/*! 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);
2、requestAnimationFrame.js:
(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); }; } }());
相关文章推荐
- 动画效果第一弹——购物车添加商品特效
- Android实现购物车添加商品特效
- Magento商品列表点击添加到购物车
- Android实现添加商品到购物车动画效果
- ###Jsp+Servlet购物商城day03.1:商品添加到购物车。重点笔记
- Magento如何通过url参数给购物车添加商品?
- HTML5-调用-购物车商品(del)-班级添加-也买酒
- JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
- 16款购物商城添加购物车源码特效
- 购物车架构 一:添加商品到购物车
- Android实现购物车添加商品动画
- 把商品添加到购物车的动画效果(贝塞尔曲线)
- Android中使用动画动态添加商品进购物车
- HTML 购物车计算总价+添加或者减少商品数量
- 安卓购物车添加商品动画效果
- 商品添加到购物车模块java程序
- 添加商品,如果已经选择了就不能重复添加了。类似购物车的添加。js怎么判断呢?
- 模仿购物车实现ListView中商品数量的添加以及总价的调整
- 一个购物车添加商品程序(java+ajax+servlet)