jquery fly 플러그인_jquery를 기반으로 장바구니에 추가하는 포물선 애니메이션 효과 구현

먼저 렌더링을 보여드리겠습니다.

쇼핑 웹사이트에서 장바구니 담기 기능은 꼭 필요한 기능입니다. 일부 웹사이트에서는 사용자가 장바구니에 추가 버튼을 클릭하면 제품이 포물선 형태로 장바구니에 추가된 것처럼 표시됩니다. 클릭하면 애니메이션을 볼 수 있습니다. 매우 멋져 보이고 사용자 경험이 어느 정도 향상됩니다. 다음은 jquery fly 플러그인을 기반으로 장바구니에 추가하는 포물선 애니메이션 효과를 소개합니다.

장바구니에 포물선 애니메이션을 추가하는 기능을 실현하려면 jquery.fly 플러그인을 사용하는 것이 매우 편리합니다

1. 플러그인 다운로드

플러그인 공식:https://github.com/amibug/fly

2. jQuery 라이브러리 파일과 jquery.fly.min.js 플러그인을 로드합니다.

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

3. 장바구니에 담기 애니메이션 플라이인 효과 예시

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

<div class="container">
<div class="demo clearfix">
<div class="per">
<img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jquery fly 플러그인_jquery를 기반으로 장바구니에 추가하는 포물선 애니메이션 효과 구현"/>
<div class="title">aaa</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jquery fly 플러그인_jquery를 기반으로 장바구니에 추가하는 포물선 애니메이션 효과 구현"/>
<div class="title">bbb</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</div>
</div>
<div class="cart-sidebar">
<div class="cart">
<i id="icon-cart"></i>
<span>购物车</span>
</div>
</div>
<div id="tip">成功加入购物车！</div>
<script>
$(function() { 
var offset = $("#icon-cart").offset(); 
$(".addcart").click(function(event) { 
var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
var flyer = $('<img  class="flyer-img lazy"  src="/static/imghwm/default1.png"  data-src="requestAnimationFrame.js"  + img + '" alt="jquery fly 플러그인_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(); //销毁抛物体 
} 
}); 
}); 
});
<script>

비고

IE10 아래에는 다음 js를 추가해야 합니다.

<script></script>

위 내용은 장바구니에 추가하는 포물선 애니메이션 효과를 구현하기 위한 jquery fly 플러그인에 대한 내용입니다. 모두에게 도움이 되기를 바랍니다.