你的位置:首页 > Java教程

[Java教程]基于jQuery加入购物车飞入动画特效


基于jQuery加入购物车飞入动画特效。这是一款电商购物网站常用的把商品加入购物车代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div id="main">    <div class="demo">      <div class="box">        <img src="images/lg.jpg" width="180" height="180">        <h4>          ¥<span>3499.00</span></h4>        <p>          LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>        <a href="#" class="button orange addcar">加入购物车</a>      </div>      <div class="box">        <img src="images/hs.jpg" width="180" height="180">        <h4>          ¥<span>3799.00</span></h4>        <p>          Hisense/海信 LED50T1A 海信电视官方旗舰店</p>        <a href="#" class="button orange addcar">加入购物车</a>      </div>      <div class="box">        <img src="images/cw.jpg" width="180" height="180">        <h4>          ¥<span>¥3999.00</span></h4>        <p>          Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>        <a href="#" class="button orange addcar">加入购物车</a>      </div>      <div class="box">        <img src="images/ls.jpg" width="180" height="180">        <h4>          ¥<span>6969.00</span></h4>        <p>          乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>        <a href="#" class="button orange addcar">加入购物车</a>      </div>    </div>  </div>  <div class="m-sidebar">    <div class="cart">      <i id="end"></i><span>购物车</span>    </div>  </div>  <div id="msg">    已成功加入购物车!</div>  </div>

css代码:

 .demo    {      width: 820px;      margin: 60px auto 10px auto;    }        .m-sidebar    {      position: fixed;      top: 0;      right: 0;      background: #000;      z-index: 2000;      width: 35px;      height: 100%;      font-size: 12px;      color: #fff;    }    .cart    {      color: #fff;      text-align: center;      line-height: 20px;      padding: 200px 0 0 0px;    }    .cart span    {      display: block;      width: 20px;      margin: 0 auto;    }    .cart i    {      width: 35px;      height: 35px;      display: block;      background: url(car.png) no-repeat;    }    #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;    }        .box    {      float: left;      width: 198px;      height: 320px;      margin-left: 5px;      border: 1px solid #e0e0e0;      text-align: center;    }    .box p    {      line-height: 20px;      padding: 4px 4px 10px 4px;      text-align: left;    }    .box:hover    {      border: 1px solid #f90;    }    .box h4    {      line-height: 32px;      font-size: 14px;      color: #f30;      font-weight: 500;    }    .box h4 span    {      font-size: 20px;    }    .u-flyer    {      display: block;      width: 50px;      height: 50px;      border-radius: 50px;      position: fixed;      z-index: 9999;    }        .button    {      display: inline-block;      outline: none;      cursor: pointer;      text-align: center;      text-decoration: none;      font: 16px/100% 'Microsoft yahei' ,Arial, Helvetica, sans-serif;      padding: .5em 2em .55em;      text-shadow: 0 1px 1px rgba(0,0,0,.3);      -webkit-border-radius: .5em;      -moz-border-radius: .5em;      border-radius: .5em;      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);      box-shadow: 0 1px 2px rgba(0,0,0,.2);    }    .button:hover    {      text-decoration: none;    }    .button:active    {      position: relative;      top: 1px;    }    /* orange */    .orange    {      color: #fef4e9;      border: solid 1px #da7c0c;      background: #f78d1d;      background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));      background: -moz-linear-gradient(top, #faa51a, #f47a20);      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');    }    .orange:hover    {      background: #f47c20;      background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));      background: -moz-linear-gradient(top, #f88e11, #f06015);      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');    }    .orange:active    {      color: #fcd3a5;      background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));      background: -moz-linear-gradient(top, #f47a20, #faa51a);      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');    }

js代码:

 $(function () {      var offset = $("#end").offset();      $(".addcar").click(function (event) {        var addcar = $(this);        var img = addcar.parent().find('img').attr('src');        var flyer = $('<img src="' + img + '">');        flyer.fly({          start: {            left: event.pageX,            top: event.pageY          },          end: {            left: offset.left + 10,            top: offset.top + 10,            width: 0,            height: 0          },          onEnd: function () {            $("#msg").show().animate({ width: '250px' }, 200).fadeOut(1000);            addcar.css("cursor", "default").removeClass('orange').unbind('click');            this.destory();          }        });      });    });

via:http://www.w2bc.com/Article/29464