jQuery melaksanakan kesan animasi menambah pada shopping cart_jquery

HTML

Mula-mula muatkan fail perpustakaan jQuery dan pemalam jquery.fly.min.js.

Salin kod Kod adalah seperti berikut:

Seterusnya, letakkan struktur html maklumat produk Dalam contoh ini, kami menyusun empat produk bersebelahan Setiap kotak produk termasuk maklumat seperti gambar produk, harga, nama dan butang tambah ke troli.

Salin kod Kod adalah seperti berikut:

￥3499.00

LG 49LF5400-CA 49-inci IPS reka bentuk syiling tembaga kaya dengan skrin keras

Tambah pada troli

￥3799.00

Hisense/Hisense LED50T1A Kedai Utama Rasmi Hisense TV

Tambahkan pada troli

￥￥3999.00

Skyworth/Skyworth 50E8EUS 8-teras 4Kj sistem terbuka sejuk ultra-jelas TV LCD pintar

Tambah pada troli

￥6969.00

LeTV Letv X60S 4-teras 1080P HD 3D Android Smart Super TV

Tambahkan pada troli

Kemudian, kami juga perlu menambah troli beli-belah dan maklumat segera di sebelah kanan halaman.





Salin kod


Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

Berjaya ditambahkan pada troli beli-belah!

CSS

Kami menggunakan CSS untuk menyusun dahulu produk dan mencantikkannya, kemudian menetapkan gaya troli beli-belah di sebelah kanan Sila lihat kod untuk butiran:

Salin kod Kod adalah seperti berikut:

.box{float:left; lebar:198px; ketinggian:320px; jidar-kiri:5px; sempadan:1px pepejal #e0e0e0; text-align:center}
.kotak p{line-height:20px; padding:4px 4px 10px 4px; text-align:left}
.box:hover{border:1px solid #f90}
.box h4{line-height:32px; saiz fon:14px; warna:#f30;berat fon:500}
.box h4 span{font-size:20px}
.u-flyer{paparan: blok;lebar: 50px;tinggi: 50px;jejari sempadan: 50px;kedudukan: tetap;z-index: 9999;}
.m-bar sisi{kedudukan: tetap;atas: 0;kanan: 0;latar belakang: #000;z-index: 2000;lebar: 35px;tinggi: 100%;saiz fon: 12px;warna: #fff;}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.span cart{display:block;width:20px;margin:0 auto;}
.cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;}
#msg{position:fixed; atas:300px; kanan:35px; z-indeks:10000; lebar:1px; ketinggian:52px; ketinggian baris: 52px; saiz fon: 20px; text-align:center; warna:#fff; latar belakang:#360; paparan:tiada}

jQuery

我们要实现的效果是，当用户点击“加入购物车”按钮时，当前商品图片会会了图片会了以按钮为起点，向右侧以抛物线的形式飞出，最后落入页面右侧的购物车里，并提示操作成功。在飞出之前，我们要获取当前商徾珇的盾商品的盾件，之后的抛物线轨迹都是由fly插件完成，我们只需定义起点和终点等参数即可。

复制代码 代码如下:

$(function() {
    var offset = $("#end").offset();
    $(".addcar").klik(fungsi(acara){
        var addcar = $(ini);
        var img = addcar.parent().find('img').attr('src');
        var flyer = $('');
        flyer.fly({
            mulakan: {
                kiri: event.pageX, //开始位置（必填）#fly元素会被设置成 kedudukan: tetap
                atas: event.pageY //开始位置（必填）
            },
            tamat: {
                kiri: offset.left 10, //结束位置（必填）
                atas: offset.top 10, //结束位置（必填）
                lebar: 0, //结束时宽度
                ketinggian: 0 //结束时高度
            },
            onEnd: function(){ //结束回调
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息
                addcar.css("kursor","default").removeClass('oren').unbind('klik');
                this.destory(); //移除dom
            }
        });
    });
});

🎜得一提的是，IE10以下需要添加以下js：

以上就是本文的全部内容了，希望大家能够喜欢