jQuery는 Tmall을 모방하여 장바구니에 놀라운 추가 기능을 제공합니다_jquery

매우 멋진 장바구니 추가 효과는 Tmall 및 Jumei Youpin의 장바구니 추가 효과와 비슷합니다. 이 기사에서는 장바구니에 추가하기 위한 플러그인인 jquery.fly.min.js를 소개합니다. 클릭하여 장바구니에 추가하면 포물선 애니메이션 효과와 함께 항목이 장바구니에 도착합니다.

데모 사진:

HTML

먼저 jQuery.js 및 jquery.fly.min.js 플러그인을 로드하세요.

<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script>

다음으로 시연용 제품 4개를 만듭니다. 각 제품에는 사진, 가격, 이름, 장바구니 담기 버튼 등의 정보가 있습니다.

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="images/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="jQuery는 Tmall을 모방하여 장바구니에 놀라운 추가 기능을 제공합니다_jquery" /> 
  <h3>&yen;<span>259.00</span></h3> 
  <div class="title">春款真皮坡跟大码单鞋内增高女士鞋子</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="jQuery는 Tmall을 모방하여 장바구니에 놀라운 추가 기능을 제공합니다_jquery" /> 
  <h3>&yen;<span>136.00</span></h3> 
  <div class="title">韩国代购情侣棉衣棉服女款韩版羊羔毛大衣</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="图片三" /> 
  <h3>&yen;<span>&yen;728.00</span></h3> 
  <div class="title">冬季运动情侣羽绒棉马甲男士薄马甲</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="图片四" /> 
  <h3>&yen;<span>119.00</span></h3> 
  <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
</div>

jQuery

우리가 달성하려는 효과는 다음과 같습니다. "장바구니에 추가" 버튼을 클릭하면 제품 이미지가 버튼에서 시작하여 쇼핑 센터 오른쪽으로 포물선 모양으로 날아가는 작은 공으로 변합니다. 오른쪽에. 비행하기 전에 현재 제품의 사진을 얻은 다음 플라이 플러그인을 호출해야 합니다. 후속 포물선 궤적은 플라이 플러그인에 의해 완성되며 시작점의 왼쪽만 정의하면 됩니다. 끝점과 종료 후 파괴되기 전의 애니메이션.

$(function() { 
  var offset = $("#icon-cart").offset(); 
  $(".addcart").click(function(event) { 
    var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
    var flyer = $('<img  class="flyer-img" src="' + img + '" alt="jQuery는 Tmall을 모방하여 장바구니에 놀라운 추가 기능을 제공합니다_jquery" >'); //抛物体对象 
    flyer.fly({ 
      start: { 
        left: event.pageX,//抛物体起点横坐标 
        top: event.pageY //抛物体起点纵坐标 
      }, 
      end: { 
        left: offset.left + 10,//抛物体终点横坐标 
        top: offset.top + 10, //抛物体终点纵坐标 
      }, 
      onEnd: function() { 
        $("#tip").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果 
        this.destory(); //销毁抛物体 
      } 
    }); 
  }); 
});

위 코드를 사용하면 장바구니에 담는 효과가 완성됩니다. 멋지지 않나요! Fly 플러그인 공식 홈페이지: https://github.com/amibug/fly 또한 IE10 이하와 호환됩니다.

<script src="requestAnimationFrame.js"></script>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다