加入购物车飞入特效

Posted 曦言鸢默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了加入购物车飞入特效相关的知识,希望对你有一定的参考价值。

效果图:

 

 

css样式:

 1  <style type="text/css">
 2         .demo{width:820px; margin:60px auto 10px auto}
 3         .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;}
 4         .cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
 5         .cart span{display:block;width:20px;margin:0 auto;}
 6         .cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;}
 7         #msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
 8 
 9         .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center}
10         .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left}
11         .box:hover{border:1px solid #f90}
12         .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500}
13         .box h4 span{font-size:20px}
14         .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
15 
16         .button {
17             display: inline-block;
18             outline: none;
19             cursor: pointer;
20             text-align: center;
21             text-decoration: none;
22             font: 16px/100% \'Microsoft yahei\',Arial, Helvetica, sans-serif;
23             padding: .5em 2em .55em;
24             text-shadow: 0 1px 1px rgba(0,0,0,.3);
25             -webkit-border-radius: .5em;
26             -moz-border-radius: .5em;
27             border-radius: .5em;
28             -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
29             -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
30             box-shadow: 0 1px 2px rgba(0,0,0,.2);
31         }
32         .button:hover {
33             text-decoration: none;
34         }
35         .button:active {
36             position: relative;
37             top: 1px;
38         }
39         /* orange */
40         .orange {
41             color: #fef4e9;
42             border: solid 1px #da7c0c;
43             background: #f78d1d;
44             background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
45             background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
46             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#faa51a\', endColorstr=\'#f47a20\');
47         }
48         .orange:hover {
49             background: #f47c20;
50             background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
51             background: -moz-linear-gradient(top,  #f88e11,  #f06015);
52             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#f88e11\', endColorstr=\'#f06015\');
53         }
54         .orange:active {
55             color: #fcd3a5;
56             background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
57             background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
58             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#f47a20\', endColorstr=\'#faa51a\');
59         }
60     </style>

javascript源码:

jquery.fly.min.js 插件源码(可从网上下载):
1 !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);
View Code

 

jquery.min.js (可从网上自行下载,以后不再重复显示)
requestAnimationFrame.js 插件源码,兼容ie(可从网上下载):

 

 1 (function () {
 2   var lastTime = 0;
 3   var vendors = [\'webkit\', \'moz\'];
 4   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 5     window.requestAnimationFrame = window[vendors[x] + \'RequestAnimationFrame\'];
 6     window.cancelAnimationFrame =
 7       window[vendors[x] + \'CancelAnimationFrame\'] || window[vendors[x] + \'CancelRequestAnimationFrame\'];
 8   }
 9 
10   if (!window.requestAnimationFrame){
11     window.requestAnimationFrame = function (callback, element) {
12       var currTime = new Date().getTime();
13       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14       var id = window.setTimeout(function () {
15           callback(currTime + timeToCall);
16         },
17         timeToCall);
18       lastTime = currTime + timeToCall;
19       return id;
20     };
21   }
22   if (!window.cancelAnimationFrame){
23     window.cancelAnimationFrame = function (id) {
24       clearTimeout(id);
25     };
26   }
27 }());
View Code

 

 

调用插件,页面js:

 1 $(function() {
 2         var offset = $("#end").offset();
 3         $(".addcar").click(function(event){
 4             var addcar = $(this);
 5             var img = addcar.parent().find(\'img\').attr(\'src\');
 6             var flyer = $(\'<img class="u-flyer" src="\'+img+\'">\');
 7             flyer.fly({
 8                 start: {
 9                     left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed
10                     top: event.pageY //开始位置(必填)
11                 },
12                 end: {
13                     left: offset.left+10, //结束位置(必填)
14                     top: offset.top+10, //结束位置(必填)
15                     width: 0, //结束时宽度
16                     height: 0 //结束时高度
17                 },
18                 onEnd: function(){ //结束回调
19                     $("#msg").show().animate({width: \'250px\'}, 200).fadeOut(1000); //提示信息
20                     addcar.css("cursor","default").removeClass(\'orange\').unbind(\'click\');
21                     this.destory(); //移除dom
22                 }
23             });
24         });
25     });

 

html源码:

 1 <script src="../jquery/jquery.min.js"></script>
 2 <script src="jquery.fly.min.js"></script>
 3 <script src="requestAnimationFrame.js"></script>
 4 
 5 <div class="box">
 6     <img src="images/lg.jpg" width="180" height="180">
 7     <h4><span>3499.00</span></h4>
 8     <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>
 9     <a href="#" class="button orange addcar">加入购物车</a>
10 </div>
11 <div class="box">
12     <img src="images/hs.jpg" width="180" height="180">
13     <h4><span>3799.00</span></h4>
14     <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
15     <a href="#" class="button orange addcar">加入购物车</a>
16 </div>
17 <div class="box">
18     <img src="images/cw.jpg" width="180" height="180">
19     <h4><span>¥3999.00</span></h4>
20     <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
21     <a href="#" class="button orange addcar">加入购物车</a>
22 </div>
23 <div class="box">
24     <img src="images/ls.jpg" width="180" height="180">
25     <h4><span>6969.00</span></h4>
26     <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
27     <a href="#" class="button orange addcar">加入购物车</a>
28 </div>
29 <div class="m-sidebar">
30     <div class="cart">
31         <i id="end"></i>
32         <span>购物车</span>
33     </div>
34 </div>
35 <div id="msg">已成功加入购物车!</div>

 

 

以上是关于加入购物车飞入特效的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现飞入购物车功能

商品飞入购物车特效

贝塞尔曲线实现购物车飞入效果

飞入购物车功能

jquery 购物车飞入效果

飞入购物车