jquery 物品加入购物车动画效果

Posted 2020-08-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 物品加入购物车动画效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
<style type="text/css" media="screen">
*{
    padding:0;
    margin:0;
}
.demo{
    width:100%;
}
.demo img{
    width:100%;
}
footer{
    background-color:#fff;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:9;
    color:#fff;
}
.cart{
    width:100px;
    height:50px;
    text-align: center;
    line-height:50px;
    float:left;
    background-color:orangered;
    position:relative;
}
.cart i{
    background-color:red;
    position: absolute;
    left:0;
    top:0;
    height:12px;
    line-height:12px;
    font-size:12px;
    padding:2px 5px;
}
.btn{
    background-color:red;
    text-align: center;
    line-height:50px;
}
.cart-img{
    position:absolute;
    left:0;
    top:0;
}
</style>
</head>
<body>
    
    <div class="demo">
        <img src="http://img0.imgtn.bdimg.com/it/u=811742909,3224698459&fm=21&gp=0.jpg" alt="">
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <footer>
        <div class="cart cd">购物车<i class="num">0</i></div>
        <div class="btn cd">加入购物车</div>
    </footer>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    var num = 0;
    /* 主要思路：是copy 一张封面图片，然后插入到要动画的新元素中，根据动画效果定位到购物车的大概位置即可 */
    function createCartImg(){
        $(‘.num‘).html( ++num );
        // if ( $(‘.cart-img‘).length > 0 ) return false; //如果需要等待完成动画在执行的判断
        var s = $(‘.demo img‘).attr(‘src‘),
            w = $(‘.demo img‘).width() ,
            h = $(‘.demo img‘).height() ,
            a = h / w , 
            r = parseInt(Math.random(1)*10000); //创建随机数不重复
        
        //创建新的图片元素
        var newDom = ‘<div class="cart-img-‘+r+‘ cart-img"><img width="‘+w+‘px" height="‘+h+‘px" src="‘+s+‘"></div>‘;
        $(‘body‘).append( newDom );
        $(‘.cart-img-‘+r+‘ img‘).animate({‘width‘: w/2+‘px‘,‘height‘:h/2+‘px‘});
        $(‘.cart-img-‘+r).animate({‘width‘:w/2+‘px‘,‘height‘:h/2+‘px‘,‘margin-left‘:-( w/4 )+‘px‘,‘top‘:h+‘px‘,‘left‘:‘50%‘});

        //根据购物车位置设定值
        var l = $(‘.cart‘).offset().left ,
            t = $(‘.cart‘).offset().top ,
            w = $(‘.cart‘).width() ,
            h = w * a ;

        //当滚动条滚动的时候
        $(window).scroll(function(){
            t+= $(window).scrollTop();
        });

        $(‘.cart-img-‘+r+‘ img‘).animate({‘width‘:w+‘px‘,‘height‘:h+‘px‘});
        $(‘.cart-img-‘+r).animate({‘width‘:w+‘px‘,‘height‘:h+‘px‘,‘left‘:l+‘px‘,‘top‘:(t-h)+‘px‘,‘margin-left‘:‘0‘,‘margin-top‘:0},800,function(){
            $(this).animate({‘top‘:t+‘px‘,‘option‘:0},800,function(){
                $(this).remove();
            }); 
        });
    }

    //点击加入购物车的按钮
    $(‘.btn‘).on( ‘click‘ , createCartImg );
</script>
</body>
</html>

以上是关于jquery 物品加入购物车动画效果的主要内容，如果未能解决你的问题，请参考以下文章

JQuery模拟实现天猫购物车动画效果

jquery实现购物车物品加减没效果，求解