jQuery はショッピング カートに追加するアニメーション効果を実装します_jquery

HTML

まず、jQuery ライブラリ ファイルと jquery.fly.min.js プラグインをロードします。

コードをコピーします コードは次のとおりです:

<スクリプト src="jquery.js">
<スクリプト src="jquery.fly.min.js">

次に、製品情報の HTML 構造をレイアウトします。この例では、各製品ボックスに製品の写真、価格、名前、カートに追加ボタンなどの情報が含まれています。

コードをコピーします コードは次のとおりです:

￥3499.00

LG 49LF5400-CA 49 インチ IPS ハード スクリーン、リッチな銅貨デザイン

カートに追加

￥3799.00

ハイセンス/Hisense LED50T1A ハイセンス TV 公式旗艦店

カートに追加

￥￥3999.00

Skyworth/Skyworth 50E8EUS 8 コア 4Kj 超鮮明クール オープン システム スマート液晶テレビ

カートに追加

￥6969.00

LeTV Letv X60S 4 コア 1080P HD 3D Android スマート スーパー TV

カートに追加

次に、ショッピング カートを追加し、ページの右側に情報を表示する必要もあります。





コードをコピーします


コードは次のとおりです:

& Lt; I ID = "終了" & gt;                                                                                  

ショッピングカートに正常に追加されました。

CSS CSS を使用して最初に商品を配置し、美しくし、次に右側のショッピング カートのスタイルを設定します。詳細については、コードを参照してください: 。

コードをコピー


コードは次のとおりです:

.box{浮動小数点:左;幅:198ピクセル;高さ:320ピクセル;マージン左:5px;ボーダー:1px ソリッド #e0e0e0; text-align:center}
.box p{行の高さ:20px;パディング:4px 4px 10px 4px; text-align:left}
.box:hover{border:1px ソリッド #f90}
.box h4{行の高さ:32px;フォントサイズ:14px; color:#f30;font-weight:500}
.box h4 スパン{font-size:20px}
.u-flyer{表示: ブロック;幅: 50ピクセル;高さ: 50ピクセル;境界半径: 50ピクセル;位置: 固定;z-インデックス: 9999;}
.m-sidebar{位置: 固定;上: 0;右: 0;背景: #000;z-index: 2000;幅: 35px;高さ: 100%;フォントサイズ: 12px;色: #fff;}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.cart スパン{表示:ブロック;幅:20px;マージン:0 自動;}
.cart i{幅:35px;高さ:35px;表示:ブロック;背景:url(car.png) 繰り返しなし;}
#msg{位置:固定;上:300ピクセル;右:35ピクセル; z インデックス:10000;幅:1ピクセル;高さ:52ピクセル;行の高さ:52px;フォントサイズ:20px;テキスト整列:中央;色:#fff;背景:#360;表示:なし}

jQuery

私が達成すべき結果は、使用ポイントが「物品追加」を行ったときに、現在の商品画像が小さな球体になり、物体線の形で右に向かって出てきて、最後に落とされます。出発する前に、現在の商品の写真を取得し、その後フライコンポーネントを使用して調整し、その後の物流トラックはすべてフライコンポーネントによって完了し、開始点と終了点を設定するだけで済みます。等のパラメータを使用できます。

复制代 代码如下:

<スクリプト>
$(function() {
    var offset = $("#end").offset();
    $(".addcar").click(function(event){
        var addcar = $(this);
        var img = addcar.parent().find('img').attr('src');
        varFlyer = $('');
        フライヤー.fly({
            開始: {
                left:event.pageX, //開始位置（必須）#fly元素会被設置位置:fixed
                top:event.pageY //开開始位置（必須）
            }、
            終了: {
                left: offset.left 10, //结束位置（必須）
                top: offset.top 10, //结束位置（必須）
                width: 0, //结束時間宽度
                height: 0 //終了時の高さ
            }、
            onEnd: function(){ //结束回调
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); // 提案情報
                addcar.css("カーソル","デフォルト").removeClass('オレンジ').unbind('クリック');
                this.destory(); //移除ダム
            }
        });
    });
});

上のバージョンコードを保存し、実行するとすぐに効果がわかります。Fly のサイトのサイトの場所は次のとおりです。https://github.com/amibug/fly、IE10以下に追加が必要なjs：

<スクリプト src="requestAnimationFrame.js">

以上、本文の全内容了、希望大家能够喜欢