JQ 参数进入表达式

最新推荐文章于 2024-03-18 10:31:08 发布

Fade Away

最新推荐文章于 2024-03-18 10:31:08 发布

阅读量399

点赞数 1

分类专栏： JQ

本文链接：https://blog.csdn.net/qq_26239917/article/details/90450770

版权

JQ 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为jq里面可以写 {“attr”:value},{“attr”:“value”},第一种形式也就可以写参数进去

$(".slider").stop().animate({
                        "left": id * 100
                    }, 1000);

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> </title>
    <script src="../lib/vue.min.js"></script>
    <script src="../js/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 160px;
            height: 160px;
        }

        .a {
            border: 2px solid red;
        }

        .b {
            background: darkmagenta;
        }

        .c {
            border-radius: 50%;
        }

        .item {
            text-align: center;
            height: 50px;
            line-height: 50px;
            width: 100px;
            float: left;
            font-size: 24px;
            color: darkolivegreen;
            background: darkgray;
            /* border: 1px solid dodgerblue; */
            /* padding: 10px 15px; */
        }

        .item.active {
            /* color: rebeccapurple;
            background: #333; */
        }

        .content {
            width: 300px;
            height: 300px;
            background: darkcyan;
            text-align: center;
            line-height: 300px;
            font-size: 80px;
            color: #fff;
        }

        .outer1,.outer2 {
            width: 300px;
            position: relative;
        }

        .slider {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 50px;
            line-height: 50px;
            background:#29A3F1;
            z-index: 1;
            opacity: 0.5;
        }
        .move_box{
            position: relative;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .move{
            position: absolute;
            width: 900px;
            height: 300px;
        }
        .move li{
            float: left;
            list-style: none;
            text-align: center;
            line-height: 300px;
            background:#29A3F1;
            opacity: 0.5;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="outer2">
            <div class="slider"></div>
            <div class="outer1">
                <div @click="change(0)" class="item" :class="current==0?'active':''" id="btn1">菜单01</div>
                <div @click="change(1)" class="item" :class="current==1?'active':''" id="btn2">菜单02</div>
                <div @click="change(2)" class="item" :class="current==2?'active':''" id="btn3">菜单03</div>
            </div>
            <div class="move_box">
                    <ul class="move">
                            <li>内容01</li>
                            <li>内容02</li>
                            <li>内容03</li>
                    </ul>
            </div>
        </div>



    </div>
    <script>
        // 作业  添加动画 
        const vm = new Vue({
            el: "#app",
            data: {
                title: "class && style 动态绑定 ",
                flagA: true,
                classObj: {
                    b: true,
                    c: true
                },
                isA: 'a',
                isC: 'c',
                id: 1901,
                styleObj: {
                    border: "2px solid green"
                },
                current: 0
            },
            methods: {
                change(id) {
                    console.log(id);
                    this.current = id;
                    $(".slider").stop().animate({
                        "left": id * 100
                    }, 1000);
                    $(".move").stop().animate({
                        "left": id * (-300)
                    }, 1000)
                }
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            }
        })


    </script>
</body>

</html>

Fade Away

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ 参数进入表达式

因为jq里面可以写 {“attr”:value},{“attr”:“value”},第一种形式也就可以写参数进去$(".slider").stop().animate({ "left": id * 100 }, 1000);<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫