由于个人习惯把心得写在html文件中,所以就不另外写了。
请直接复制代码,在网页中查看效果。
代码部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉子菜单</title>
<style>
/*样式初始化*/
* {
margin: 0px;
padding: 0px;
}
/* 第一个下拉菜单 */
.menu_1 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #FC9;
color: #FFF;
}
.menu_1 li:hover {
background-color: #F60;
}
.menu_1>ul>li {
position: relative;
float: left;
display: block;
}
.menu_1>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: auto;
display: none;/* 这里 Display 的属性为隐藏,在JQuery执行时,会使元素显示 */
}
/* 第二个下拉菜单 */
.menu_2 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #6CF;
color: #FFF;
}
.menu_2 li:hover {
background-color: #06F;
}
.menu_2>ul>li {
position: relative;
float: left;
display: block;
}
.menu_2>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: 0px;
overflow: hidden;
/*
通过CSS方法产生过渡效果;
*/
transition: all ease-in-out 2s 0s;
}
.menu_2>ul>li:hover>ul {
/*
如果执行:height: 200px; 可看到过渡效果(transition)。
但因为高度是固定的,当鼠标超出元素的范围,但又未超过极限高度200px时,依然处于激活状态。
执行:height: auto; 鼠标可以正确地激活元素的准确位置。但会使过渡效果失效(transition)。
*/
height: 200px;
}
/* 第三个下拉菜单 */
.menu_3 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #0C9;
color: #FFF;
}
.menu_3 li:hover {
background-color: #090;
}
.menu_3>ul>li {
position: relative;
float: left;
display: block;
}
.menu_3>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 第一个下拉菜单 -->
<div class="menu_1" >
<!--引用JQuery 库文件-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js">
</script>
<script>
<!-- $(document).ready 表示所有的元素都加载完毕 -->
$(document).ready(function () {
$(".menu_1>ul>li").mouseover(function () {
$(this).children("ul").slideDown(2000);
});
$(".menu_1>ul>li").mouseleave(function () {
$(this).children("ul").slideUp(2000);
});
});
</script>
<ul>
<li>L1
<ul>
<li>L1_1</li>
<li>L1_2</li>
<li>L1_3</li>
<li>L1_4</li>
</ul>
</li>
<li>L2
<ul>
<li>L2_1</li>
<li>L2_2</li>
<li>L2_3</li>
<li>L2_4</li>
<li>L2_5</li>
</ul>
</li>
<li>L3
<ul>
<li>L3_1</li>
</ul>
</li>
</ul>
</div>
<!-- 第二个下拉菜单 -->
<div class="menu_2" >
<ul>
<li>L1
<ul>
<li>L1_1</li>
<li>L1_2</li>
<li>L1_3</li>
<li>L1_4</li>
</ul>
</li>
<li>L2
<ul>
<li>L2_1</li>
<li>L2_2</li>
<li>L2_3</li>
<li>L2_4</li>
<li>L2_5</li>
</ul>
</li>
<li>L3
<ul>
<li>L3_1</li>
</ul>
</li>
</ul>
</div>
<!-- 第三个下拉菜单 -->
<div class="menu_3" >
<script type="text/javascript">
window.onload = function () {
var navs = document.getElementsByClassName("nav");
var changespeed = 1;
var changedelay = 20;
/* 循环绑定所有元素的鼠标事件 */
for(var i = 0; i < navs.length; i++) {
navs[i].onmouseover = function () {
var U = this.getElementsByTagName("ul")[0];
if(U != undefined) {
/*
documet.children.length 会获得所有子节点的个数;
42 为 样式中每个li的高度;
两者的乘积就是这个ul的内容高度,可以实现高度自动适应;
U.style.height = 42 * (U.children.length) + "px";
*/
/* 先终止对立的动画 */
clearInterval(U.t2);
U.t = setInterval(function () {
if(U.offsetHeight < (42 * U.children.length)) {
U.style.height = U.offsetHeight + changespeed + "px";
}
else {
clearInterval(U.t);
}
}, changedelay);
}
}
navs[i].onmouseout = function () {
var U = this.getElementsByTagName("ul")[0];
if(U != undefined) {
clearInterval(U.t);
U.t2 = setInterval(function () {
if(U.offsetHeight > 0) {
U.style.height = U.offsetHeight - changespeed + "px";
}
else {
clearInterval(U.t2);
}
}, changedelay);
}
}
}
}
</script>
<ul>
<li class="nav">L1
<ul>
<li>L1_1</li>
<li>L1_2</li>
<li>L1_3</li>
<li>L1_4</li>
</ul>
</li>
<li class="nav">L2
<ul>
<li>L2_1</li>
<li>L2_2</li>
<li>L2_3</li>
<li>L2_4</li>
<li>L2_5</li>
</ul>
</li>
<li class="nav">L3
<ul>
<li>L3_1</li>
</ul>
</li>
</ul>
</div>
<div ">
<p><br/>
*过渡动画的速度都设置得很慢,尝试不停的移动鼠标,来激活onmouseover和onmouseout事件,观察差异。*</p>
<p >JQuery:会先执行完一个过渡动画,再执行另一个动画。所以在鼠标不停切换事件时,会先登记动画效果,再按这些顺序来进行逐一播放。所以会有很明显的延迟。</p>
<p ">CSS3:实现过渡效果的样式属性-transition。此方法可以做到即时响应,在一个事件触发时,会先结束上一个事件的动画。但是动画的起点样式和终点样式的属性不能使用“auto”,必须是指定的值。</p>
<p ">JS:也可以做到即时响应。而且可以做到更多更复杂的效果。但代码量较多。</p>
</div>
</body>
</html>
效果图如下:
热门评论
同上,看不了啊!!!!!!!!!!!!!!!
复制不了,看不了效果