JQ implementiert Beispielcode für die Animationsnavigation-js-Tutorial-php.cn

JQ implementiert Beispielcode für die Animationsnavigation

零下一度

Freigeben： 2017-07-20 15:00:22

Original

1481 Leute haben es durchsucht

1. Die Akkordeonnavigation kann sowohl auf Mobilgeräten als auch auf dem PC verwendet werden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            ul{
                display: none;
            }
            h3{
                background-color: blue;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid chartreuse;
                margin: 0 auto;
            }
            ul>li{
                background-color: chartreuse;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid red;
                margin: 0 auto;
            }</style>
        <script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">//            通过jq的滑入滑出动画可作出手风琴式的导航栏$(document).ready(function(){//jq准备函数$("h3").on("click",function(){
                    $("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇                })
            })</script>
    </head>
    <body>
        <h3>语文</h3>
        <ul>
            <li>语文1</li>
            <li>语文2</li>
            <li>语文3</li>
            <li>语文4</li>
        </ul>
        <h3>数学</h3>
        <ul>
            <li>数学1</li>
            <li>数学2</li>
            <li>数学3</li>
        </ul>
        <h3>英语</h3>
        <ul>
            <li>英语1</li>
            <li>英语2</li>
            <li>英语3</li>
        </ul>
        <h3>地理</h3>
        <ul>
            <li>地理1</li>
            <li>地理2</li>
            <li>地理3</li>
        </ul>
        <h3>政治</h3>
        <ul>
            <li>政治1</li>
            <li>政治2</li>
            <li>政治3</li>
        </ul>
    </body>
</html>

Nach dem Login kopieren

2. Die Dropdown-Navigation ist für den PC geeignet

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">ul{
                list-style: none;
                margin-left: 35%;
            }
            ul li{float: left;
                width: 100px;
                height: 30px;
                background-color: deeppink;
                line-height: 30px;
                text-align: center;
                margin-left: 5px;
            }
            ul li>ul{
                margin-left: -45px;
                margin-top: 5px;
                display: none;
            }</style>
        <script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">$(document).ready(function(){
                $("#ul>li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑                },function(){
                    $(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑                })
            })</script>
    </head>
    <body>
        <ul id="ul">
            <li>去岁一别<ul>
                    <li>一年</li>
                    <li>两年</li>
                    <li>三年</li>
                    <li>四年</li>
                    <li>五年</li>
                </ul>
            </li>
            <li>救赎问候<ul>
                    <li>一次</li>
                    <li>两次</li>
                    <li>三次</li>
                    <li>四次</li>
                    <li>五次</li>
                </ul>
            </li>
            <li>深感愧疚<ul>
                    <li>一句</li>
                    <li>两句</li>
                    <li>三句</li>
                    <li>四句</li>
                    <li>五句</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Nach dem Login kopieren

Es gibt mehr Navigationsstile. Mit den neuen Attributen und Animationen von C3 werden verschiedene Navigationsstile realisiert.

Das obige ist der detaillierte Inhalt vonJQ implementiert Beispielcode für die Animationsnavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!