jQuery implémente l'effet d'animation de l'ajout au panier

jQuery implémente l'effet d'animation de l'ajout au panier_jquery

WBOY

Libérer： 2016-05-16 16:09:40

original

1839 Les gens l'ont consulté

HTML

Chargez d'abord le fichier de la bibliothèque jQuery et le plug-in jquery.fly.min.js.

Copier le code Le code est le suivant :

Ensuite, présentez la structure HTML des informations sur le produit. Dans cet exemple, nous organisons quatre produits côte à côte. Chaque boîte de produit comprend des informations telles que des images de produits, des prix, des noms et des boutons d'ajout au panier.

Copier le code Le code est le suivant :

￥3499.00

LG 49LF5400-CA Écran dur IPS de 49 pouces, conception de pièces de monnaie en cuivre riche

Ajouter au panier

￥3799.00

Hisense/Hisense LED50T1A Magasin phare officiel Hisense TV

Ajouter au panier

￥￥3999.00

Ajouter au panier

￥6969.00

LeTV Letv X60S 4 cœurs 1080P HD 3D Android Smart Super TV

Ajouter au panier

Ensuite, nous devons également ajouter un panier et des informations rapides sur le côté droit de la page.

Copier le code

Le code est le suivant :

Ajouté au panier avec succès !

CSS

Nous utilisons CSS pour d'abord organiser les produits et les embellir, puis définir le style du panier à droite. Veuillez consulter le code pour plus de détails :
.

Copier le code

Le code est le suivant :

.box{float:gauche; largeur : 198 px ; hauteur : 320 px ; marge gauche : 5px ; bordure : 1px solide #e0e0e0 ; text-align:center} 

.box p{hauteur de ligne:20px; remplissage : 4px 4px 10px 4px ; texte-align:gauche} 

.box:hover{border:1px solid #f90} 

.box h4{hauteur de ligne:32px; taille de police : 14 px ; couleur : #f30 ; poids de la police : 500} 

.box h4 span{font-size:20px} 

.u-flyer{affichage : bloc;largeur : 50px;hauteur : 50px;radius de bordure : 50px;position : fixe;index z : 9999;} 

.m-sidebar{position : fixe;haut : 0;droite : 0;arrière-plan : #000;z-index : 2000;largeur : 35 px;hauteur : 100 %;taille de police : 12 px;couleur : #fff;} 

.cart{color : #fff;text-align:center;line-height : 20px;padding : 200px 0 0 0px;} 

.cart span{display:block;width:20px;margin:0 auto;} 

.cart i{largeur:35px;hauteur:35px;affichage:bloc; background:url(car.png) no-repeat;} 

#msg{position:fixé; haut : 300 px ; à droite : 35 px ; indice z : 10 000 ; largeur : 1 px ; hauteur : 52 px ; hauteur de ligne : 52 px ; taille de police : 20 px ; texte-align:centre; couleur :#fff ; arrière-plan : #360 ; affichage : aucun}

jQuery

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

复制代码代码如下 :

<script> <br>
$(fonction() { <br>
    var offset = $("#end").offset(); <br>
    $(".addcar").click(function(event){ <br>
        var addcar = $(this); <br>
        var img = addcar.parent().find('img').attr('src'); <br>
        var flyer = $('<img class="u-flyer" src="' img '">'); <br>
        flyer.fly({ <br>
            début : { <br>
                gauche : event.pageX, //开始位置（必填）#fly元素会被设置成position : fixe <br>
                top : event.pageY //开始位置（必填） <br>
            }, <br>
            fin : { <br>
                gauche : offset.left 10, //结束位置（必填） <br>
                top : offset.top 10, //结束位置（必填） <br>
                width: 0, //结束时宽度 <br>
                hauteur : 0 //结束时高度 <br>
            }, <br>
            onEnd : function(){ //结束回调 <br>
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 <br>
                addcar.css("cursor","default").removeClass('orange').unbind('clic'); <br>
                this.destory(); //移除dom <br>
            } <br>
        }); <br>
    }); <br>
}); <br>
</script> 

复制上面的代码，保存并运行即可看到效果，Fly插件的项目官网地址是：https://github.com/amibug/fly， IE10以下需要添加以下js：

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