suchen

Heim >Web-Frontend >js-Tutorial >JQuery-Titelauswahlanimation

JQuery-Titelauswahlanimation

韦小宝
韦小宝Original
2017-11-20 11:41:211844Durchsuche

jqueryTitelauswahlanimation, Quellcode als Bonus enthalten. Wer sich für jquery interessiert, kann es studieren und ein anderes Verständnis von jquery entwickeln ~~

JQuery-Titelauswahlanimation

Code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <style>
        /*container容器只是为了水平居中，如不需要可以去掉这层嵌套*/
        .container{
            left: 50%;
            margin-top: 100px;
            float: left;
            cursor:pointer;
            position: relative;
        }
        .BG{
            right: 50%;
            font-size: 0;
            background-color: #f2f2f2;
            border-radius: 30px;
            position: relative;
        }
        .container div{
            font-size: 16px;
            line-height: 60px;
        }
        .list{
            float: left;
            display: inline-block;
            padding: 0 50px;
            transition: color 0.5s;
            position: relative;
            z-index: 1;
        }

        /*这里的listH和listA顺序不能换，有优先级，当listA被使用时listH不起作用*/
        .listH{
            color: #ff8300;
        }
        .listA{
            color: #fff;
        }

        /*滑块*/
        #active{
            width: 100px;
            height: 60px;
            border-radius: 30px;
            background-color: #ff8300;
            box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
            position: relative;
            z-index: 0;
            transition: left 0.5s,width 1s;
        }
    </style>
    <script>
        $(document).ready(function () {

                /*设置默认激活的选项卡eq(i)*/
                var aL = $(".list:eq(1)");
                $("#active").width(aL.innerWidth());
                $("#active").offset(aL.offset());
                aL.addClass("listA");

                /*为每个按钮添加点击事件*/
                $(".list").click(function() {
                    $("#active").width($(this).innerWidth());   //设置宽度
                    $("#active").offset($(this).offset());   //设置位置
                    $(this).addClass("listA");
                    $(".list").not(this).removeClass("listA");
                });

                /*hover效果*/
                $(".list").hover(function () {
                    $(this).addClass("listH")
                },function () {
                    $(this).removeClass("listH")
                })

        });
    </script>
</head>
<body>
<div>
    <div>
        <div>PHP中文网首页</div>
        <div>PHP中文网视频教程</div>
        <div>PHP中文网社区</div>
        <div>PHP中文网技术文章</div>
        <div>PHP中文网工具下载</div>
        <div id="active"></div>
    </div>
</div>
</body>
</html>

Das Obige ist das Quellcode der JQuery-Titelauswahlanimation. Wenn Sie interessiert sind, gehen Sie bitte zur PHP-Chinese-Website und suchen Sie nach

Verwandte Empfehlungen:

JS-Loop-Karusselldiagramm

jquery implementiert den Adressbezug über IP

jquery implementiert Gesten. Quellcode entsperren

Das obige ist der detaillierte Inhalt vonJQuery-Titelauswahlanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Loop-KarusselldiagrammNächster Artikel：JS-Loop-Karusselldiagramm

In Verbindung stehende Artikel

Mehr sehen