JQ implémente un exemple de code de navigation d'animation-js tutoriel-php.cn

Maison

interface Web

js tutoriel

JQ implémente un exemple de code de navigation d'animation

Jul 20, 2017 pm 03:00 PM

动画导航手风琴

1. La navigation en accordéon peut être utilisée à la fois sur mobile et sur PC

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

Copier après la connexion

2. La navigation déroulante convient aux PC

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

Copier après la connexion

Il existe davantage de styles de navigation. Grâce aux nouveaux attributs et animations de C3, différents styles de navigation seront réalisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn