vue实现小汽车功能

查看代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>小汽车</title>
    <script src="../vue3.js"></script>
    <script src="./data.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: rgba(227, 226, 226, 0.7);
        }

        .container {
            width: 1065px;
            background-color: #fff;
            margin: 0 auto;
            margin-top: 50px;
            padding: 0px 30px;
            padding-top: 30px;
        }

        .wrap {
            font-size: 12px;
        }

        .nav {
            display: flex;
        }

        .nav li {
            padding: 3px 15px;
            width: 30px;
            text-align: center;
            margin-right: 20px;
            border: 1px solid red;
            border-radius: 2px;
            color: red;
            font-size: 1.2em;
            cursor: pointer;
        }

        .nav li.active {
            background-color: red;
            color: #fff;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-top: 30px;
        }

        .content img {
            width: 100%;
            height: 100%;
        }

        .content span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2em;
            color: #fff;
            opacity: 0;
            cursor: pointer;
            z-index: 5;
        }

        .content .item {
            width: 240px;
            height: 120px;
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
            margin-right: 20px;
            transition: all 0.6s;
            background-color: aqua;
            animation: r 0.3s;
            transform-origin: 50% 100%;
        }

        .content .item::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            opacity: 0;
            transition: all 0.5s;
            cursor: pointer;
            z-index: 4;
        }

        .content .item:hover::before,
        .content .item:hover span {
            opacity: 1;
        }

        .preview {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9;
        }

        .preview>div {
            width: 80px;
            height: 80px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            color: #fff;
            font-size: 2em;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
            top: 50%;
            margin-top: -40px;
        }
        @keyframes r {
            from {
                transform: translateY(-20px) scale(0, 0);
            }

            to {
                transform: translateY(0) scale(1, 1);
            }
        }

        .preview>div:hover {
            background-color: #cacaca;
        }

        .preview .prev {
            left: 50px;
        }

        .preview .prev::before {
            content: "P";
        }

        .preview .next {
            right: 50px;
        }

        .preview .next::before {
            content: "N";
        }

        .wrap div.show {
            display: flex;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="container">
            <div class="wrap">
                <ul class="nav">
                    <li v-for="(v,key) in all" :class="{active:show===key}" :key="key" @click="change(key)">{{key}}</li>
                </ul>
                <div class="content">
                    <div class="item" v-for="(v,i) in list" :key="show+v.title" @click="imgIndex=i">
                        <img :src="v.src" :alt="v.alt">
                        <span>{{v.alt}}</span>
                    </div>
                </div>
                <div class="preview" @click.self="imgIndex=-1" v-show="imgIndex!==-1">
                    <div class="prev" @click.stop="prev"></div>
                    <div class="next" @click.stop="next"></div>
                    <img :src="list[imgIndex]?.src" alt="">
                </div>

            </div>

        </div>
    </div>
    <script>
        let listObj = {};
        listObj.全部 = []
        data.forEach(val => {
            if (listObj[val.type] == undefined) {
                listObj[val.type] = []
            }
            listObj[val.type].push(val)
            const i = listObj.全部.findIndex(item => {
                return val.title === item.title
            })
            if (i === -1) {
                listObj.全部.push(val)
            }
        })
        console.log(listObj);
        const app = Vue.createApp({
            el: "#root",
            data() {
                return {
                    all: listObj,
                    // 当前展示数据
                    list: listObj.全部,
                    // 当前展示图片的下标
                    imgIndex: -1,
                    // 当前展示的分类名字
                    show: '全部'
                }
            },
            methods: {
                change(key) {
                    this.show = key;
                    this.list = this.all[key]
                },
                prev() {
                    this.imgIndex--;
                    if (this.imgIndex === -1) this.imgIndex = this.list.length - 1;
                },
                next() {
                    this.imgIndex++;
                    if (this.imgIndex === this.list.length) this.imgIndex = 0;
                },

            },
        });
        app.mount('#root')
    </script>
</body>

</html>

 

 

 

原文地址:http://www.cnblogs.com/maxiaopi/p/16852853.html

发表评论

您的电子邮箱地址不会被公开。