点击添加小球到指定位置、点击添加购物车动画、点击小球飞入购物车。html和vue写法

weixin_44708899

已于 2023-04-25 16:43:12 修改

阅读量413

点赞数

文章标签： vue.js javascript html Powered by 金山文档

于 2023-02-16 18:51:52 首次发布

本文链接：https://blog.csdn.net/weixin_44708899/article/details/129057122

版权

//html写法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>饿了么外卖</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="ele_car_icon"><div class="fa"></div></div>
    
    <div class="ele_main_goods">
            <div class="ele_main_goods_add"><div class="fa-plus-circle"></div></div>
    
            <div class="ele_main_goods_add"><div class="fa-plus-circle"></div></div>
    
            <div class="ele_main_goods_add"><div class="fa-plus-circle"></div></div>
    </div>
</body>

</html>

<script>
    // 获取到
    var buttons = document.getElementsByClassName('ele_main_goods_add')
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            let x = event.pageX - this.offsetWidth / 2;
            let y = event.pageY - this.offsetWidth / 2;
            // createBall01(x, y)
            createBall02(x, y)
        }
    }

    /**
        方法一：使用定位+transition的方式实现
    */
    function createBall01(left, top) {
        let bar = document.createElement('div');
        bar.style.position = 'absolute'
        bar.style.left = (left) + 'px'
        bar.style.top = (top) + 'px'
        bar.style.width = '0.533333rem'
        bar.style.height = '0.533333rem'
        bar.style.borderRadius = '50%'
        bar.style.backgroundColor = '#02b6fd'
        bar.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)'

        document.body.appendChild(bar)
        // 添加动画属性
        setTimeout(() => {
            let target = document.querySelector('.ele_car_icon')
            bar.style.left = (target.offsetLeft + target.offsetWidth / 2) + 'px'
            bar.style.top = (target.offsetTop) + 'px'
        }, 0);

        /**
         * 动画结束后，删除自己
         */
        bar.ontransitionend = function () {
            this.remove()
        }
    }

    /**
    * 方法二：使用transform + transition的方式实现
    */
    function createBall02(x, y) {
        const bar = document.createElement('div')
        bar.style.position = 'absolute'
        bar.style.left = '0'
        bar.style.top = '0'
        bar.style.width = '0.533333rem'
        bar.style.height = '0.533333rem'
        bar.style.borderRadius = '50%'
        bar.style.backgroundColor = '#02b6fd'
        // transform
        bar.style.transform = 'translate(' + x + 'px,' + y + 'px)'
        bar.style.transition = 'transform .5s linear'


        document.body.appendChild(bar)
        // 添加动画属性
        setTimeout(() => {
            let target = document.querySelector('.ele_car_icon')
            let targetX = (target.offsetLeft + target.offsetWidth / 2)
            let targetY = (target.offsetTop)
            bar.style.transform = 'translate(' + targetX + 'px,' + targetY + 'px)'
        }, 0);

        /**
         * 动画结束后，删除自己
         */
        bar.ontransitionend = function () {
            this.remove()
        }

    }



</script>

//vue组件写法
<template>
    <view class="">
        <view class="ele_car_icon"></view>
    
        <view class="ele_main_goods">
                <view class="fa-plus-circle" style="background-color: pink;"></view>
        
                <view class="fa-plus-circle" style="background-color: skyblue;"></view>
        
                <view class="fa-plus-circle" style="background-color: palegreen;"></view>
        </view>
    </view>
            
</template>
 <script>
    import $ from "@/static/js/jquery.min.js";
    export default {
        data() {
          return {
          }
        },
        mounted(){
            var buttons = document.getElementsByClassName('fa-plus-circle')
            console.log(buttons);
            console.log(this);
            console.log(window);
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    let x = event.pageX - this.offsetWidth / 2;
                    let y = event.pageY - this.offsetWidth / 2;
                    console.log(event);
                    console.log(x);
                    console.log(y);
                    
                    let bgColor=buttons[i].style.backgroundColor
                    console.log(buttons[i].style.backgroundColor);
                    
                    // createBall01(x, y)
                    createBall02(x, y,bgColor)
                }
            }
            
            // 方法二：使用transform + transition的方式实现
            function createBall02(x, y,bgColor) {
                const bar = document.createElement('div')
                bar.style.position = 'absolute'
                bar.style.left = '0'
                bar.style.top = '0'
                bar.style.width = '50px'
                bar.style.height = '50px'
                bar.style.borderRadius = '50%'
                bar.style.backgroundColor = bgColor
                // transform
                bar.style.transform = 'translate(' + x + 'px,' + y + 'px)'
                bar.style.transition = 'transform .5s linear'
            
            
                document.body.appendChild(bar)
                // 添加动画属性
                setTimeout(() => {
                    let target = document.querySelector('.ele_car_icon')
                    let targetX = (target.offsetLeft + target.offsetWidth / 2)
                    let targetY = (target.offsetTop)
                    bar.style.transform = 'translate(' + targetX + 'px,' + targetY + 'px) scale(0.5)'
                }, 0);
            
                // 动画结束后，删除自己
                bar.ontransitionend = function () {
                    this.remove()
                }
            
            }
            
        },
        methods: {
        }
    }
 </script>

 
<style scoped>
    @import url("../css/index.css");
</style>

//index.css
//根据需求把不需要的给删掉
* {
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
    }
    body {
        min-width: 320px;
        width: 10rem;
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #fff;
        font-size: 0.426667rem !important;
    }
    h1,h2,h3,h4,h5,h6,p {
        margin: 0;
    }
    
    ul,ol,dl {
        list-style: none;
    }
    
    .ele_main_goods {
            width: 100%;
            flex-grow: 1;
            overflow: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            bottom: 10%;
            left: 0;
        .fa-plus-circle{
            width: 50px;
            height: 50px;
        }
    }
    .ele_car_icon {
        width: 50px;
        height:  50px;
        border-radius: 50%;
        background-color: #02B6FD;
    }