> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 장바구니_jquery에 추가하는 애니메이션 효과를 구현합니다.

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

WBOY
풀어 주다: 2016-05-16 16:09:40
원래의
1851명이 탐색했습니다.

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:

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿