mooc听课笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航菜单</title>
<!-- 增加JavaScript脚本,使得菜单被选中时有动态拉长效果 -->
<script>
window.οnlοad=function(){ /*加载完最后才执行此代码*/
var aA=document.getElementsByTagName('a');
for (var i = 0; i <=aA.length; i++) {
aA[i].οnmοuseοver=function(){
var This=this;
clearInterval(This.time); /*B*/
This.time=setInterval(function(){
This.style.width=This.offsetWidth+4+"px"; /*此函数本身就是循环,只写这个的话,会一直变长,只要触发,每30豪秒运行一次,offsetWidth为对象的实际宽度,4为速度*/
if(This.offsetWidth>=160){
clearInterval(This.time) ; /*就是停止了计时器,但只写到此处,鼠标移开,不会复原*/
}
},30) /*计时器,每30毫秒运行一次function()*/
}
aA[i].οnmοuseοut=function(){
var This=this;
clearInterval(This.time); /* A*/
This.time=setInterval(function(){
This.style.width=This.offsetWidth-4+"px"; /*变为-4*/
if(This.offsetWidth<=100){
This.style.Width="100px";
clearInterval(This.time) ;
}
},30) /*写到这里可以成功复原,但是有个缺点,若鼠标在到达规定长度前松开,会出错(伸缩),可以把速度设大点,或者在每个onmouseout、onmoutover的function的开头清除动画,如A,B所示*/
}
}
}
</script>
<style >
*{margin:0;padding:0;font-style: 14px;} /* 清除初始布局*/
li{float:left;margin-top: 20px;margin-left:5px;} /* 用marginleft使每个菜单间隔5px,对比竖向菜单,使用浮动,并将ul的宽度限制去掉 */
ul{list-style: none;height:50px;border-bottom:5px solid #f60;padding-left:30px;background:black;} /* 清除ul前原点,padding-left:菜单集体向右;padding内容与块,margin块间 */
a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom: 1px; text-indent:0px;text-align: center;border-radius:10px 10px 0 0; }
/*1.将a标签变为块标签;
2.margin-bottom让每行菜单之间隔1px (垂直菜单需要);
3.text-indent为文本缩进,用padding-left也能让每行菜单的文字向右移动相应像素,但是会让li的宽度自动增加,文本缩进则不会
4.height和line-height设置一样的值可以实现文字垂直居中,line-height与fontsize之差的一半加在字上与字下,line-height为li的高度(字加上下间距);line-height中文字行数越多,实际文字高度越小,总高度不超过lineheight值,而height可以被撑大,因此在垂直居中后,若增大lineheight值,由于高度改变不了,文字向下(lineheight-fontsize变大了),若增大height值,高度可被撑大,多以灰色区域向下溢出(因为上界被li限制了)
5.textalign居中,将缩进改为0缩进
6.border-radius圆角菜单,但实现形式太简单,css3中有更好的实现*/
.on,a:hover{background-color: #f60;color:#fff;height:40px;margin-top: -10px;line-height:40px;} /* 1.鼠标经过时背景色变为橘黄色,字体色为白色
2.为了让经过时,菜单变高,且文字保持不变,使用height改变on及a:hover的高度,但是会使高度向下增加,我们想让菜单向上增高,所以用margin-top:-10px*/
</style>
</head>
<body>
<ul>
<li><a class="on" href="#">首 页</a></li> <!-- 设定第一个菜单预设选中 -->
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
主要实现了菜单的定位,圆角菜单,JavaScript实现菜单动画,CSS实现hover效果。
CSS3中<!-- 制作圆角菜单:
正常状态有界,有shadow
鼠标经过(hover):变深色,darker gradient 颜色渐变
点击(active):反向颜色渐变,文字下降1px,文字颜色变暗
用css3,见http://webdesignerwall.com/tutorials/css3-gradient-buttons
-->