jQuery implémente l'effet de menu en cascade (imitation de l'animation du menu de la page d'accueil de Taobao)_jquery

Je pense que les étudiants qui découvrent HTM DIV CSSl voudront également créer des animations de menu pour la page d'accueil de Taobao. Aujourd'hui, nous allons vous montrer comment afficher le menu en cascade. L'éditeur vient d'obtenir un effet simple, mais dans l'ensemble, le principe est le même, alors laissez tout le monde jeter un œil aux rendus d'abord.

Donc pour obtenir cet effet, bien sûr il faut utiliser jQuery, puis je vais commencer à expliquer comment faire, d'abord les codes html et css

Copier le code Le code est le suivant :

>menu.html

description" content =" ceci est ma page">


< link rel= "stylesheet" type="text/css" href="../css/menu.css">



< /head>

🎜>Produits numériques informatiques

href ="#">Cahier



• Cahier 1< /li>
  
• Cahier 1


• Cahier 1< ;/a>


• Cahier 1
/li>


• Disque dur mobile 🎜>
• Disque dur mobile 1


• Disque dur mobile 1< ;/ a>


• Disque dur mobile 1


• Disque dur mobile 1



;Logiciel informatique



• Logiciel informatique 1< ;/a> ;


• Logiciel informatique 1


• Logiciel informatique 1


• Logiciel informatique 1
🎜>< ;/ul>


• Produits numériques class= "tip">
  
• Produit numérique 1
"> ;Produit numérique 1

• Produit numérique 1

Produits numériques 1

Copier le code


Le code est le suivant :

@CHARSET "UTF-8" ;

*{
marge : 0px ;
remplissage : 0px ;

}

ul,li{
list-style-type : aucun ;

}

.menu{
largeur : 190 px ;
bordure : 1px rouge solide ;
couleur de fond : #fffdd2 ;
}

.optn{
largeur : 190 px ;
hauteur de ligne : 28 px ;
border-top : 1px en pointillés rouges ;

}


.content{
padding-top:10px;
clair : gauche ;
}


a{
text-decoration : aucun ;
couleur : #666 ;
rembourrage : 10 px ;
}
.optnFocus{
couleur de fond : #fff;
font-weight : gras ;

}

div{
remplissage : 10px ;
}

.tip{
largeur : 190 px ;
bordure : 2px rouge solide ;
position : absolue ;
couleur de fond : #fff ;
affichage : aucun ;
}

.tip li{
hauteur de ligne : 23px ;
}

接下来就是主要的jquery代码:menu.js

复制代码代码如下:

$(function(){

var curY;//获取所选想的TOP
var curH;//获取所选的Hauteur
var curW;//获取所选的width
var objL;//获取当前对象

//自定义函数用于获取当前位置
function setInitValue(obj ){
curY=obj.offset().top;
curH=obj.height();
curW=obj.width();

//设置当前所选项的鼠标滑动事件
$(".optn").mouseover(function(){
objL=$(this);//获取当前对象
setInitValue(objL);
var allY=curY- curH "px";

objL.addClass("optnFocus");
//获取气元素下的下一个ul
$(".tip",this).show(). css({"top":allY,"left":curW});;

});
$(".optn").mouseout(function(){

$(this).removeClass("optnFocus");
$(".tip",this.hide();

//为了防止移到);

$(".tip").mouseover(function(){

$(this).show() ;
objL=$(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus"); $(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");

});
});


注意要点：

1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp),在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择
2.整个效果的实现

要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦