jQuery implementiert einen kaskadierenden Menüeffekt (Nachahmung der Taobao-Homepage-Menüanimation)_jquery

Ich glaube, dass Studierende, die HTM DIV CSSl noch nicht kennen, auch Menüanimationen für die Homepage von Taobao erstellen möchten. Heute zeigen wir Ihnen, wie Sie das Kaskadenmenü anzeigen. Der Editor hat nur einen einfachen Effekt erzielt, aber im Großen und Ganzen ist das Prinzip dasselbe, also werfen Sie alle zuerst einen Blick auf die Renderings.

Um diesen Effekt zu erzielen, müssen wir natürlich jQuery verwenden. Dann beginne ich zu erklären, wie das geht, zuerst die HTML- und CSS-Codes

Code kopierenDer Code lautet wie folgt:

>

Beschreibung" content="das ist meine Seite">


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



< /head>

🎜>< ;span>Digitale Computerprodukte

Notebook
• Notebook 1< /li>
  
• Notizbuch 1


• Notizbuch 1< ;/a>


• Notebook 1
/li>


• Mobile Festplatte 🎜>
• Mobile Festplatte 1


• Mobile Festplatte 1< ;/ a>


• Mobile Festplatte 1
="# ">Mobile Festplatte 1




• ;Computersoftware
  Computersoftware 1< ;/a> ;
  
  • Computersoftware 1
  
  
  • Computersoftware 1
  
  
  • Computersoftware 1
  🎜>< ;/ul>
  class= "tip">
  
  • Digitales Produkt 1
  "> ;Digitales Produkt 1
  
  • Digitales Produkt 1
  
  Digitale Produkte 1
  
  
  

Code kopieren


Der Code lautet wie folgt:

@CHARSET „UTF-8“;

*{
Rand: 0px;
Auffüllung: 0px;

}

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

}

.menu{
width: 190px;
Rand: 1 Pixel roter Vollton;
Hintergrundfarbe: #fffdd2;
}

.optn{
width: 190px;
Zeilenhöhe: 28px;
border-top: 1px rot gestrichelt;

}


.content{
padding-top:10px;
klar: links;
}


a{
text-decoration: none;
Farbe: #666;
Auffüllung: 10px;
}
.optnFocus{
Hintergrundfarbe: #fff;
Schriftstärke: fett;

}

div{
padding: 10px;
}

.tip{
width: 190px;
Rand: 2 Pixel roter Vollton;
Position: absolut;
Hintergrundfarbe: #fff;
Anzeige: keine;
}

.tip li{
line-height: 23px;
}

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

复制代码代码如下:

$(function(){

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

//自定义函数用于获取当前位置
function setInitValue( obj){
curY=obj.offset().top;
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");
objL.addClass("optnFocus");

$(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");

});
});


注意要点:

1持的,例如获取下一个元素的第一个子元素next(erp),在10.1中是不支持的,所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择

2.整个效果的实现

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