下拉菜单;手风琴;九宫格的Jquery的使用实例
1.下拉菜单
效果如图:
下拉.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
<style>
li{
width: 80px;
background-color: deepskyblue;
list-style: none;
cursor:pointer;
}
ul > li.out {
display: block;
list-style: none;
float: left;
padding-left: 40px;
}
ul > li ul{
position: relative;
padding-left: 0px;
}
.beijing{
width: 800px;
height: 30px;
background-color: skyblue;
position: absolute;
margin-top: -6px;
z-index: -5;
}
</style>
</head>
<body>
<div class="beijing"></div>
<ul class="outUl">
<li class="out">政策指南
<ul>
<li>政策指南1</li>
<li>政策指南2</li>
<li>政策指南3</li>
</ul>
</li>
<li class="out">教务园地
<ul>
<li>教务园地1</li>
<li>教务园地2</li>
<li>教务园地3</li>
</ul>
</li>
<li class="out">走进课堂
<ul>
<li>走进课堂1</li>
<li>走进课堂2</li>
<li>走进课堂3</li>
</ul>
</li>
</ul>
<script>
$(function () {
var $li = $("ul > li ul");
$li.hide();
$(".outUl>li.out").mouseenter(function () {
$(this).children().show(500);
});
$(".outUl>li.out").mouseleave(function () {
$li.hide(200);
});
})
</script>
</body>
</html>
2.手风琴
效果如图:
手风琴.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
<style>
.container{
width: 200px;
height: 500px;
border: 1px solid black;
}
.out{
background-color: #00CCFF;
cursor: pointer;
/*cursor: help;*/
}
.inner{
height: 120px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="out">
下拉列表1
</div>
<div class="inner">
下拉列表的内容
</div>
</div>
<div>
<div class="out">
下拉列表2
</div>
<div class="inner">
下拉列表的内容
</div>
</div>
<div>
<div class="out">
下拉列表3
</div>
<div class="inner">
下拉列表的内容
</div>
</div>
<div>
<div class="out">
下拉列表4
</div>
<div class="inner">
下拉列表的内容
</div>
</div>
</div>
<script>
$(function () {
$(".container div.inner").hide();
$(".container div.out").click(function () {
console.log($(this).next(".inner").siblings().next(".inner"));
$(this).next(".inner").toggle(200).parent().siblings().children(".inner").slideUp(200);
});
})
</script>
</body>
</html>
3.九宫格
效果如图:
jiu.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
<style>
* {
background-color: black;
}
.container {
width: 500px;
border: 1px solid white;
margin: auto;
overflow: hidden;
}
.container div {
width: 135px;
height: 165px;
display: block;
margin: 10px 10px;
float: left;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
<script>
$(function () {
$(".container>div").mouseenter(function () {
$(this).css("opacity",1).siblings().css("opacity",0.4);
});
$(".container").mouseleave(function () {
$(".container div").css("opacity",1);
})
})
</script>
</body>
</html>