jQuery는 장바구니_jquery에 추가하는 애니메이션 효과를 구현합니다.

HTML

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

코드 복사 코드는 다음과 같습니다.

다음으로, 이 예에서는 4개의 제품을 나란히 배열합니다. 각 제품 상자에는 제품 사진, 가격, 이름, 장바구니에 추가 버튼과 같은 정보가 포함되어 있습니다.

코드 복사 코드는 다음과 같습니다.

₩3499.00

LG 49LF5400-CA 49인치 IPS 하드스크린 풍부한 구리 코인 디자인

장바구니에 추가

₩3799.00

Hisense/Hisense LED50T1A Hisense TV 공식 플래그십 스토어

장바구니에 추가

₩₩3999.00

Skyworth/Skyworth 50E8EUS 8코어 4Kj 울트라 클리어 쿨 오픈 시스템 스마트 LCD TV

장바구니에 추가

₩6969.00

LeTV Letv X60S 4코어 1080P HD 3D 안드로이드 스마트 슈퍼 TV

장바구니에 추가

그런 다음 장바구니를 추가하고 페이지 오른쪽에 정보를 표시해야 합니다.





코드 복사


코드는 다음과 같습니다.

& Lt; I ID = "끝" & lt;/i & gt;                                                                                  

장바구니에 성공적으로 추가되었습니다!

CSS

먼저 CSS를 사용하여 제품을 정렬하고 아름답게 만든 다음 오른쪽의 장바구니 스타일을 설정합니다. 자세한 내용은

코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

.box{float:왼쪽; 너비:198px; 높이:320px; 여백-왼쪽:5px; 테두리:1px 솔리드 #e0e0e0; 텍스트 정렬:가운데}
.box p{라인 높이:20px; 패딩:4px 4px 10px 4px; 텍스트 정렬:왼쪽}
.box:hover{border:1px solid #f90}
.box h4{줄 높이:32px; 글꼴 크기:14px; color:#f30;font-weight:500}
.box h4 범위{글꼴 크기:20px}
.u-flyer{디스플레이: 블록;너비: 50px;높이: 50px;테두리 반경: 50px;위치: 고정;z-색인: 9999;}
.m-사이드바{위치: 고정;상단: 0;오른쪽: 0;배경: #000;z-색인: 2000;너비: 35px;높이: 100%;글꼴 크기: 12px;색상: #fff;}
.cart{색상: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.cart 범위{display:block;width:20px;margin:0 자동;}
.cart i{너비:35px;높이:35px;디스플레이:블록; 배경:url(car.png) 반복 없음;}
#msg{위치:고정; 상단:300px; 오른쪽:35px; Z-색인:10000; 너비:1px; 높이:52px; 줄 높이:52px; 글꼴 크기:20px; 텍스트 정렬:가운데; 색상:#fff; 배경:#360; 디스플레이:없음}

jQuery

저희는 이 제품에 대해 더 잘 알고 있습니다.向右侧以抛물체형의 형태로 나온 最后落入页面右侧的购物车里，并提示操작품성설功。 에서지금출저앞에, 我们要获取当前商品的图picture, 然后调사용fly插件, 之后的抛물线轨迹是由fly插件完成，我们只需定义起点화终点等参数即可。

复主代码 代码如下:

$(함수() {
    var offset = $("#end").offset();
    $(".addcar").click(함수(이벤트){
        var addcar = $(this);
        var img = addcar.parent().find('img').attr('src');
        var Flyer = $('');
        전단지.플라이({
            시작: {
                왼쪽: event.pageX, //开始位置（必填）#fly元素会被设置成위치: 고정
                상단: event.pageY //开始位置（必填）
            },
            끝: {
                왼쪽: offset.left 10, //结束位置(必填)
                top: offset.top 10, //结束位置（必填）
                너비: 0, //전체 크기
                높이: 0 //고도
            },
            onEnd: function(){ //结束回调
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息
                addcar.css("cursor","default").removeClass('orange').unbind('click');
                this.destory(); //移除dom
            }
        });
    });
});
스크립트>

제대로 된 고급형 세대, 保存并运行即可看到效果, Fly插件的项目官网地址是：https://github.com/amibug/fly,值得一提的是,IE10以下需要添加以下js：

<script></script>

以上就是本文의 전체 부서 内容了,希望大家能够喜欢