加入购物车飞入动画-html代码-BFW代码库

加入购物车飞入动画

代码语言：html

所属分类：电商

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            (function() {
                let totalBtn1 = 0,
                totalBtn2 = 0;
                function clickBtn() {
                    $('button').on('click', function () {
                        let img = $(this).parent().find('img');
                        let btn = $(this).attr('class');
                        let flyImg = img.clone().css({
                            'opacity': '0.6'
                        });
                        $('.wrapper').append(flyImg);
                        flyImg.css({
                            'z-index': 999,
                            'border': '3px solid #fff',
                            'position': 'absolute',
                            'height': img.height() + 'px',
                            'width': img.width() + 'px',
                            'top': img.offset().top +'px',
                            'left': img.offset().left + 'px'
                        })
                        flyImg.animate({
                            'width': 50 + 'px',
                            'height': 50 + 'px',
                            'border-radius': 100 + '%'
                        }, function() {
                            let t;
                            if (btn == 'btn1') {
                                t = $('#btn1-add').offset().top;
                                totalBtn1 ++;
                                if (totalBtn1 > 99) {
                                    totalBtn1 = 99
                                }
                            } else if (btn = 'btn2') {
                                t = $('#btn2-add').offset().top + 'px';
                                totalBtn2 ++;
                                if (totalBtn2 > 99) {
                                    totalBtn2 = 99
                                }
                            }
                            flyImg.animate({
                                'top': t,
                                'left': ($(document).width()-$('.rightBox').width()) + 'px',
                                'height': 0 +'px',
                                'width': 0+'px',
                            }, 1500, function() {
                                flyImg.remove();
                                $('#btn2-add').html(totalBtn2);
                                $('#btn1-add').html(totalBtn1);
                            })
                        });
                    })
                }
                function mouseCover() {
                    $('.rightBox-ul li').on('mouseenter', function() {
                        $(this).find('.leftBox').animate({
                            'left': -90 +'px',
                        }).addClass('show');
                        $(this).find('.fir-leftBox').addClass("show");
                        $(this).find('.sev-leftBox').addClass("show");
                    })
                    $('.rightBox-ul li').on('mouseleave', function() {
                        $(this).find('.leftBox').animate({
                            'left': -121+'px',
                        }).add('.fir-leftBox').removeClass('show');
                        $(this).find('.fir-leftBox').removeClass('show');
                        $(this).find('.sev-leftBox').removeClass('show');
                    })
                }
                clickBtn();
                mouseCover()
            })();
        });
    </script>
    <style>
        body {
            background: white;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper {
            width: 100%;
            height: 700px;
        }
        .wrapper .imgBox ul {
            width: 100%;
            text-align: center;
            margin-top: 50px;
        }
        .wrapper .imgBox li {
            display: inline-block;
            height: 300px;
            width: 300px;
            margin-left: 20px;
        }
        .wrapper .imgBox li img {
            width: 100%;
            height: 100%;
        }
        .wrapper .imgBox button {
            margin-left: 20px;
        }
        .rightBox {
            position: fixed;
            top: 0;
            right: 0;
       .........完整代码请登录后点击上方下载按钮下载查看