下拉菜單;手風琴;九宮格的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>