jQuery는 계단식 메뉴 효과를 구현합니다(타오바오 홈페이지 메뉴 애니메이션 모방)_jquery

나는 HTM DIV CSSl을 처음 접하는 학생들도 Taobao 홈페이지의 메뉴 애니메이션을 만들고 싶어할 것이라고 믿습니다. 오늘은 계단식 메뉴를 표시하는 방법을 보여 드리겠습니다. 편집자는 단순한 효과를 얻었을 뿐이지만 전체적인 원리는 동일하므로 먼저 렌더링을 살펴보도록 하겠습니다.

그러므로 이 효과를 얻으려면 당연히 jQuery를 사용해야 합니다. 그런 다음 이를 수행하는 방법을 먼저 설명하겠습니다. 먼저 html 및 css 코드

코드 복사 코드는 다음과 같습니다.

>< title>menu.html

설명" content ="내 페이지입니다">


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

🎜>< ;span>컴퓨터 디지털 제품





• 노트북
  
  
  
  • 노트북 1> /li>
    
  • 노트북 1>
  
  
  • 노트북 1
  
  
  /li>
  
  
• 모바일 하드 드라이브
  
  🎜>
  • 모바일 하드 드라이브 1
  
  
  • 모바일 하드 드라이브 1< ;/ a>
  
  
  • 모바일 하드 드라이브 1
  
  
  • 모바일 하드 드라이브 1
  
  
  
  
  


• ;컴퓨터 소프트웨어
  
  
  
  • 컴퓨터 소프트웨어 1< ;/a>
  
  
  • 컴퓨터 소프트웨어 1>
  
  
  • 컴퓨터 소프트웨어 1
  🎜>< ;/ul>
  
  
  • 디지털 제품 class= "tip">
    
  • 디지털 제품 1>
  
  
  
  
  • 디지털 제품 1
  
  디지털 제품 1
  
  
  

코드 복사


코드는 다음과 같습니다.

@CHARSET "UTF-8";

*{
여백: 0px;
패딩: 0px;

}

ul,li{
list-style-type: 없음;

}

.menu{
너비: 190px;
테두리: 1px 빨간색 단색;
배경색: #fffdd2;
}

.optn{
너비: 190px;
줄 높이: 28px;
border-top: 1px 빨간색 점선;

}


.content{
padding-top:10px;
지우기: 왼쪽;
}


a{
텍스트 장식: 없음;
색상: #666;
패딩: 10px;
}
.optnFocus{
배경색: #fff;
글꼴 두께: 굵게;

}

div{
패딩: 10px;
}

.tip{
너비: 190px;
테두리: 2px 빨간색 단색;
위치: 절대;
배경색: #fff;
디스플레이: 없음;
}

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

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

复system代码代码如下:

$(function(){

var curY;//获取所选想的TOP
var curH;//获取所选的Height
var curW;//获取所选의 너비
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. 당신의 이야기子元素next(erp), 10.1中是不支持的, 所以我换了一种방법$(chiled,select),表示에서 select 范围进行选择

2.整个效果的实现우리는 당신의 의견에 동의하지 않습니다.效果就需要加一些图文과 样式，不过原理是一样의 哦