jquery 性能优化 jquery可以实现哪些效果

转载

laojean 2023-08-30 15:40:40

文章标签 jquery 性能优化自动轮播全屏 css 文章分类 jQuery 前端开发

一、淡入淡出轮播图
二、无缝轮播
三、全屏轮播
四、手风琴菜单
五、楼梯导航
六、滑动验证
七、放大镜–以京东为例
八、判断浏览器的轮动方向
九、验证码倒计时

一、淡入淡出轮播图

<style>
        * {
            margin: 0;
            padding: 0
        }

        li{
            list-style: none;
        }

        .banner {
            position: relative;
            width: 590px;
            height: 470px;
            border: 1px solid red;
        }

        .banner .image-box {
            width: 590px;
            height: 470px;
        }

        .banner .image-box img {
            position: absolute;
            top: 0;
            left: 0;
            display: none
        }

        .banner .image-box img:first-child {
            display: block
        }

        .banner .btn {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -25px
        }

        .banner .btn div {
            float: left;
            width: 30px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            font-family: "宋体"
        }

        .banner .btn .right {
            float: right
        }
        .banner .dots{
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            /* border: 1px solid red; */
            text-align: center;
            font-size: 0;
            
        }
        .banner .dots li{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px
        }

        .banner .dots .active{
            background-color: red
        }
        
    </style>

<body>
    <div class="banner">

        <div class="image-box">
            <img src="./image/1.jpg" alt="">
            <img src="./image/2.jpg.webp" alt="">
            <img src="./image/3.jpg.webp" alt="">
            <img src="./image/4.jpg.webp" alt="">
            <img src="./image/5.jpg" alt="">
        </div>

        <div class="btn">
            <div class="left"><</div>
            <div class="right">></div>
        </div>
        <ul class="dots">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

    <script src="../jquery-1.12.4.js"></script>
    <script>

        /*
            轮播中都要实现那些功能？    
                1. 点击下一页，显示下一张图片
                2. 点击上一页，显示上一张图片
                3. 鼠标放到banner上的是时候 不再轮播，离开之后 继续轮播
                4. 点击下面的小点，会跳转到对应的图片
                5. 小点有背景颜色，会跟随者图片改变
                6. 一开始自动轮播
        
        */

        $(function () {
            /* 索引 */
            var index = 0
            var timer;

            // 点击下一页，显示下一张图片
            $(".btn .right").click(function () {
                index++;
                if (index == 5) {
                    index = 0
                }
                change()
            })

            //点击上一页，显示上一张图片
            $(".btn .left").click(function(){
                index--;
                //当在第一张图片的时候，点击上一页，应该回到最后一页
                if(index == -1){
                    index = 4
                }
                change()
            })



            // 点击下面的小点，会跳转到对应的图片
            $(".dots li").click(function(){

                // console.log($(this).index())//获取当前点击小点的时候小点的下标
                //$(this).index()
                //要去改变图片的显示，得改变index的值
                index = $(this).index()
                change()
            })

            
            //启动自动轮播
            autoPlay()

            function autoPlay(){
                //自动轮播
                timer = setInterval(function () {
                    $(".btn .right").click()
                }, 3000)
            }

            function change(){
                $(".image-box img").eq(index).fadeIn().siblings().fadeOut()
                $(".dots li").eq(index).addClass("active").siblings().removeClass("active")
            }
            

            //鼠标放在banner上的时候停止和重启轮播
            $(".banner").mouseenter(function(){
                clearInterval(timer)
            })
            $(".banner").mouseleave(function(){
                autoPlay()
            })
            
        })

    </script>
</body>

二、无缝轮播

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            position: relative;
            width: 1226px;
            height: 460px;
            border: 2px solid red;
            overflow: hidden;
        }

        .banner .items {
            position: absolute;
            top: 0;
            left: 0;
            width: 6130px;
        }

        .banner li {
            float: left;
            width: 1226px;
            height: 460px;
        }

        .banner li img {
            width: 100%;
        }

        .banner .btn {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -40px
        }

        .banner .btn div {
            width: 50px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.3);
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            font-family: "宋体";
            /* 将鼠标转化成小手 */
            cursor: pointer;

        }

        .banner .btn .left {
            float: left;
        }

        .banner .btn .right {
            float: right;
        }

        .banner .dots {
            position: absolute;
            bottom: 10px;
            right: 20px;
            text-align: center
        }

        .banner .dots li {
            width: 15px;
            height: 15px;
            background-color: #ccc;
            display: inline-block;
            margin: 0 5px;
            border-radius: 50%
        }

        .banner .dots .active {
            background-color: red
        }
    </style>

<div class="banner">

        <ul class="items">
            <li>
                <img src="image/1.jpg" alt="">
            </li>
            <li>
                <img src="image/2.webp" alt="">
            </li>
            <li>
                <img src="image/3.webp" alt="">
            </li>
            <li>
                <img src="image/4.webp" alt="">
            </li>
            <li>
                <img src="image/1.jpg" alt="">
            </li>
        </ul>
        <div class="btn">
            <div class="left"><</div>
            <div class="right">></div>
        </div>
        <ul class="dots">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

/*索引*/
            var index = 0
            var timer
            var flag = true

            /*
                点击右按钮的时候
            */
            $(".right").click(function () {
                if (flag) {
                    flag = false
                    index++;
                    /*
                         临界值的判断 index
                    */
                    if (index == 4) {
                        $(".items").animate({ "left": -1226 * index }, 500, function () {
                            $(".items").css("left", 0);
                            flag = true
                        })

                        index = 0
                    } else {
                        $(".items").animate({ "left": -1226 * index }, 500, function () {
                            flag = true
                        })
                    }
                    $(".dots li").eq(index).addClass("active").siblings().removeClass("active")
                }

            })

            $(".left").click(function () {
                if (flag) {
                    flag = false
                    index--;
                    // 设置临界值
                    if (index == -1) {
                        $(".items").css("left", -1226 * 4)
                        index = 3
                    }
                    $(".items").animate({ "left": -1226 * index }, 500 ,function(){
                        flag = true
                    })
                    $(".dots li").eq(index).addClass("active").siblings().removeClass("active")
                }

            })

            $(".dots").on("click", "li", function () {
                index = $(this).index()
                $(".items").animate({ left: -1226 * index })
                $(".dots li").eq(index).addClass("active").siblings().removeClass("active")
            })

            timer = setInterval(function () {
                $(".right").click()
            }, 3000)

            /*鼠标悬停的时候 轮播停止*/
            $(".banner").hover(function () {
                clearInterval(timer)
            }, function () {
                timer = setInterval(function () {
                    $(".right").click()
                }, 3000)
            })

三、全屏轮播

/* 全屏轮播 */

.all_scroll {
    width: 100%;
    overflow: hidden;
    height: 565px;
    position: relative;
}

.all_scroll .image {
    width: 300%;
    position: absolute;
    left: 0;
    top: 0;
}

.all_scroll .image p {
    width: 33.3333%;
    height: 565px;
    float: left;
}

.all_scroll .image p:nth-child(1) {
    background: url(../img/scroll_1.jpg) center;
    /* background-size: 100%; */
}

.all_scroll .image p:nth-child(2) {
    background: url(../img/scroll_2.jpg) center;
    /* background-size: 100%; */
}

.all_scroll .image p:nth-child(3) {
    background: url(../img/scroll_1.jpg) center;
    /* background-size: 100%; */
}

.all_scroll .btn {
    margin: 0 auto;
    position: absolute;
    top: 282.5px;
    left: 50%;
    display: none;
}

.all_scroll .btn p {
    height: 100%;
    text-align: center;
    font-size: 50px;
    font-family: "宋体";
    color: rgba(252, 252, 252, 0.5);
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(31, 87, 190, 0.5);
}

<!-- 全屏轮播 -->
    <div class="all_scroll">
        <div class="image">
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="btn">
            <p class="minus fl_l"><</p>
            <p class="plus fl_r">></p>
        </div>
    </div>

// 全屏轮播


    // 随着屏幕宽高的变化，左右按钮大小和字体发生变化
    var set
    function fn() {

        $(".all_scroll .btn").css({
            width: 1520 / 1920 * $(window).width(),
            height: 74 / 1920 * $(window).width(),
            marginLeft: -1520 / 2 / 1920 * $(window).width(),
            marginTop: -74 / 2 / 1920 * $(window).width()
        })
        $(".all_scroll .btn p").css({
            width: 73 / 1920 * $(window).width(),
            lineHeight: 74 / 1920 * $(window).width() + "px",
            fontSize: 50 / 1920 * $(window).width() + "px"
        })
    }
    fn()
    $(window).resize(function() {
            fn()
        })
        // 轮播
    var flag = true
    var index = 0
        // 轮播加
    $(".all_scroll .plus").click(function() {
        if (flag) {
            flag = false
            index++
            $(".all_scroll .image").animate({
                left: -100 * index + "%"
            }, 200, function() {
                flag = true
            })
            if (index == 2) {
                $(".all_scroll .image").animate({
                    left: 0
                }, 0)
                index = 0
            }
        }
    })

    // 轮播减
    $(".all_scroll .minus").click(function() {
            if (flag) {
                flag = false
                if (index == 0) {
                    $(".all_scroll .image").css({
                        left: -100 * 2 + "%"
                    })
                    index = 2
                }
                index--
                $(".all_scroll .image").animate({
                    left: -100 * index + "%"
                }, 200, function() {
                    flag = true
                })
            }
        })
        // 自动轮播
    set = setInterval(function() {
        $(".all_scroll .plus").click()
    }, 3000)

    $(".all_scroll").hover(function() {
        clearInterval(set)
        $(".all_scroll .btn").fadeIn()
    }, function() {
        set = setInterval(function() {
            $(".all_scroll .plus").click()
        }, 3000)
        $(".all_scroll .btn").fadeOut()
    })

四、手风琴菜单

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            list-style: none;
            width: 200px;
            line-height: 50px;
            border: 1px solid red
        }

        p{
            border: 1px solid black
        }

        .wrap ul{
            display: none
        }
    </style>

js部分如下

$(function(){
            $(".item").click(function(){
                $(this).next().slideToggle(1000).parent().siblings().find("ul").slideUp(1000)
            })
        })

html结构如下

<body>
    <ul class="wrap">
        <li>
            <p class="item">手机</p>
            <ul>
                <li>华为</li>
                <li>小米</li>
                <li>苹果</li>
                <li>vivo</li>
            </ul>
        </li>
        <li>
            <p  class="item">电视</p>
            <ul>
                <li>海尔</li>
                <li>海信</li>
                <li>康佳</li>
                <li>索尼</li>
            </ul>
        </li>
        <li>
            <p  class="item">空调</p>
            <ul>
                <li>海尔</li>
                <li>格力</li>
                <li>美的</li>
                <li>AUX</li>
            </ul>
        </li>
        <li>
            <p  class="item">冰箱</p>
            <ul>
                <li>
                    海尔
                </li>
                <li>
                    美的
                </li>
                <li>
                    晶虹
                </li>
                <li>
                    双子
                </li>
            </ul>
        </li>
    </ul>
</body>

效果图如下所示：

jquery 性能优化 jquery可以实现哪些效果_自动轮播

jquery 性能优化 jquery可以实现哪些效果_css_02

五、楼梯导航

<style>
        * {
            margin: 0;
            padding: 0
        }

        .list {
            position: fixed;
            right: 100px;
            top: 200px;
            list-style: none;
        }

        .list li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #f00;
            text-align: center;
            color: red;

        }

        .list .active {
            background-color: #f00;
            color: #fff
        }

        div {
            font-size: 100px;
            text-align: center;
            color: #fff
        }

        .banner {
            background: #ccc;
            height: 500px;
        }

        .item {
            height: 500px;
        }

        .item:nth-child(1) {
            height: 500px;
            background-color: #111
        }

        .item:nth-child(2) {
            height: 300px;
            background-color: #222
        }

        .item:nth-child(3) {
            height: 600px;
            background-color: #333
        }

        .item:nth-child(4) {
            height: 800px;
            background-color: #444
        }

        .item:nth-child(5) {
            background-color: #555
        }

        .item:nth-child(6) {
            background-color: #666
        }

        .item:nth-child(7) {
            background-color: #777
        }

        .bottom {
            background: #ccc;
            height: 500px;
        }
    </style>

<body>
    <ul class="list">
        <li>零食</li>
        <li>酒饮</li>
        <li>奶制品</li>
        <li>饼干</li>
        <li>米面</li>
        <li>清洁</li>
        <li>家电</li>
    </ul>
    <div class="banner">banner</div>
    <div class="items">
        <div class="item">零食</div>
        <div class="item">酒饮</div>
        <div class="item">奶制品</div>
        <div class="item">饼干</div>
        <div class="item">米面</div>
        <div class="item">清洁</div>
        <div class="item">家电</div>
    </div>

    <div class="bottom">bottom</div>
    </body>

js部分代码如下

// 设置一个标志，判断是否开启滚动事件
            var flag = true

            //点击导航，跳转到对应的模块

            $(".list").on("click", "li", function () {

                flag = false;

                //获取当前li的下标
                var index = $(this).index()

                //利用当前点击的下标,找到对应的块,拿到对应块的偏移量
                var scrollTop = $(".item").eq(index).offset().top

                // 点击li 让当前的li背景发生变化
                $(this).addClass("active").siblings().removeClass("active")

                // 改变滚动条
                // $(document).scrollTop(scrollTop)
                $("html,body").animate({
                    scrollTop: scrollTop
                },function(){
                    flag = true
                })

            })

            //滚动条滚动，对应的list li变化
            $(window).scroll(function () {
                if (flag) {
                    $(".item").each(function (index, ele) {
                        //index 是下标，ele是dom对象
                        if ($(ele).offset().top - $(document).scrollTop() < 100) {
                            $(".list li").eq(index).addClass("active").siblings().removeClass("active")
                        }
                        // console.log(index,ele)
                    })
                }

            })

六、滑动验证

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .drag {
            position: relative;
            width: 300px;
            height: 50px;
            margin: 100px auto;
            background-color: #ccc;
            line-height: 50px;
            text-align: center
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 48px;
            height: 48px;
            border: 1px solid #ccc;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
            font-family: "宋体";
            z-index: 1;
        }

        .bg {
            position: absolute;
            top: 0;
            left: 0;
            height: 50px;
            width: 0;
            background-color: #75CDF9
        }

        .text {
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .check{
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #ccc
        }
    </style>

<div class="drag">
        <div class="bg"></div>
        <div class="box">>></div>
        <div class="text">请拖动滑块解锁</div>

    </div>
    <div class="check">点击获取验证码</div>

//判断是否解锁成功
            var flag = false;
            
            // 移动的最大宽度
            var MAX_WIDTH = $(".drag").width() - $(".box").outerWidth()

            // 给小块一个鼠标按下的事件
            $(".box").mousedown(function(e){
                e.preventDefault()

                 //清除transition
                 $(".box").css("transition","")
                 $(".bg").css("transition","")


                //获取点击的时候的距离左边的值
                var downLeft = e.clientX;
                $(document).mousemove(function(e){
                    var moveLeft = e.clientX - downLeft;

                    // 设置边界
                    if(moveLeft<0){
                        moveLeft = 0
                    }
                    // 判断右边界
                    if(moveLeft>MAX_WIDTH){
                        moveLeft = MAX_WIDTH
                    }

                    $(".box").css('left',moveLeft)
                    $(".bg").css('width',moveLeft)

                    //判断解锁成功
                    if(moveLeft == MAX_WIDTH){

                        flag = true;

                        $(".box").css('left',moveLeft)
                        $(".bg").css('width',moveLeft)
                        $(".text").text("解锁成功");
                        $(".bg").css('background',"lightgreen");
                        $(".box").text("√");
                        $(document).off("mouseup mousemove")
                        $(".box").off("mousedown")
                    }
                })


                $(document).mouseup(function(){
                    $(".box").css('left',0)
                    $(".bg").css('width',0)
                    $(document).off("mousemove")
                    $(".box").css("transition","all 1s ease")
                    $(".bg").css("transition","all 1s ease")

                })
            })

            
            $(".check").click(function(){
                if(flag){
                    $(this).css("background","green").text("正在获取验证码")
                }else{
                    alert("请先解锁！！！")
                } 
            })

效果图如下所示：

jquery 性能优化 jquery可以实现哪些效果_css_03

jquery 性能优化 jquery可以实现哪些效果_jquery 性能优化_04

七、放大镜–以京东为例

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .new {
            position: relative;
        }

        .top {
            width: 450px;
            height: 450px;
            margin-bottom: 20px;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #ccc;
        }

        p {
            background-color: rgba(204, 204, 21, 0.5);
            position:absolute;
            left: 0px;
            top: 0;
            display: none;
        }

        .top img {
            width: 450px;
            height: 450px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .top img:first-child,
        .bigBox img:first-child {
            display: block;
        }

        .bottom {
            width: 452px;
            height: 58px;
            padding-left: 31px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 472px;
        }

        .bottom div {
            width: 58px;
            height: 58px;
            float: left;
            margin: 0 6px 0 6px;
            border: 3px solid transparent;
        }

        .bottom img {
            width: 100%;
        }

        b {
            display: inline-block;
            width: 22px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #666;
            font-size: 30px;
            font-family: "宋体";
            cursor: pointer;
        }

        b:hover {
            background-color: #ccc;
        }

        .left {
            position: absolute;
            left: 0;
            top: 485px;
        }

        .right {
            position: absolute;
            left: 430px;
            top: 485px;
        }

        .bigBox{
                width: 530px;
                height: 530px;
                overflow: hidden;
                display: none;
                position: relative;
                left: 452px;
                top: 0px
            }

        .bigBox img {
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="new">
        <div class="out">
            <div class="top">
                <img src="./img/center1.jpg" alt="">
                <img src="./img/center2.jpg" alt="">
                <img src="./img/center3.jpg" alt="">
                <img src="./img/center4.jpg" alt="">
                <img src="./img/center5.jpg" alt="">
                <p></p>
            </div>
            <div class="bigBox">
                <img src="./img/big1.jpg" alt="">
                <img src="./img/big2.jpg" alt="">
                <img src="./img/big3.jpg" alt="">
                <img src="./img/big4.jpg" alt="">
                <img src="./img/big5.jpg" alt="">
            </div>
        </div>
        <div class="bottom">
            <div><img src="./img/small1.jpg" alt=""></div>
            <div><img src="./img/small2.jpg" alt=""></div>
            <div><img src="./img/small3.jpg" alt=""></div>
            <div><img src="./img/small4.jpg" alt=""></div>
            <div><img src="./img/small5.jpg" alt=""></div>
        </div>
        <b class="left"><</b>
        <b class="right">></b>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".bottom div").first().css({
                border: "3px solid red"
            })
            var moveWidth = $(".bigBox").width() * $(".top").width() / $(".bigBox img").width(),
                moveHeight = $(".bigBox").height() * $(".top").height() / $(".bigBox img").height(),
                bigWidth = $(".bigBox img").width() / $(".top").width(),
                bigHeight = $(".bigBox img").height() / $(".top").height(),
                $p = $("p"),
                $bigBox = $(".bigBox"),
                $top = $(".top"),
                click_number = 0
            // 设置黄色块的宽高
            $("p").css({
                width: moveWidth,
                height: moveHeight
            })
            // 黄色块跟着鼠标移动
            var left = parseFloat($(".top").offset().left),
                top = parseFloat($(".top").offset().top)
            var x, y
            console.log($(".new").offset().left)
            $(document).mousemove(function (e) {
                console.log($(".new").offset().left)
                x = e.pageX - left - $p.width() / 2
                y = e.pageY - top - $p.height() / 2
                x = x <= 0 ? 0 : x
                y = y <= 0 ? 0 : y
                x = x >= $top.width() - $p.width() ? $top.width() - $p.width() : x
                y = y >= $top.height() - $p.height() ? $top.height() - $p.height() : y
                $p.css({
                    left: x,
                    top: y
                })
                $(".bigBox img").css({
                    left: -x * bigWidth,
                    top: -y * bigHeight
                })
            })
            // 进入小图
            $(".bottom div").mouseenter(function () {
                $(this).css({
                    border: "3px solid red"
                }).siblings().css({
                    border: "3px solid transparent"
                })
                $(".top img").eq($(this).index()).css("display", "block").siblings().css("display",
                    "none")
                $(".bigBox img").eq($(this).index()).css("display", "block").siblings().css("display",
                    "none")
                click_number = $(this).index()
            })
            // 进入上方的图片
            $top.hover(function () {
                $p.css("display", "block")
                $bigBox.css("display", "block")
            }, function () {
                $p.css("display", "none")
                $bigBox.css("display", "none")
            })

            function fn() {
                $(".top img").eq(click_number).css("display", "block").siblings().css("display", "none")
                $(".bottom div").eq(click_number).css({
                    border: "3px solid red"
                }).siblings().css({
                    border: "3px solid transparent"
                })
                $(".bigBox img").eq(click_number).css("display", "block").siblings().css("display", "none")
            }
            // 按钮加
            $(".right").click(function () {
                click_number++
                if (click_number == 5) {
                    click_number = 0
                }
                fn()
            })
            // 按钮减
            $(".left").click(function () {
                click_number--
                if (click_number == -5) {
                    click_number = 0
                }
                fn()
            })
        })
    </script>
</body>

</html>

效果图如下所示：

jquery 性能优化 jquery可以实现哪些效果_全屏_05

八、判断浏览器的轮动方向

var old_scrollTop = 0
            $(window).scroll(function(){
                
                /*
                    如果滚动条向下移动，打印向下
                    如果滚动条向上移动，打印向上

                    效果：
                        http://gamer.163.com/

                */

                // console.log($(document).scrollTop())

                if($(document).scrollTop()>old_scrollTop){
                    console.log("向下")
                    old_scrollTop = $(document).scrollTop()
                }else{
                    console.log("向上")
                    old_scrollTop = $(document).scrollTop()
                }

               
            })

九、手机验证码倒计时

var num = 0;
            $(".btn").click(function () {
                if (num == 0) {
                    num = 60;
                    var t = setInterval(fn, 1000)

                    function fn() {
                        num--;
                        if (num == 0) {
                            clearInterval(t)
                        }
                        $(".btn").text("重新发送" + "(" + num + ")")
                    }
                }
            })

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。