-
制作二级菜单下拉显示动画： <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单，二级菜单动画下拉显示出来 var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; 以下基本通用：1.先清除；2.设置Interval（函数，延时）；3.（宽度或高度；延长的最大值；清除） clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } }查看全部
-
制作动画二级菜单： window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过下拉显示 var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } }查看全部
-
用jQuery设置与JavaScript使li变宽的相同的效果。【jQuery代码更加简洁，网上有很多jQuery插件可供参考】 先引入jQuery。 <script type="text/javascript" src="自动引入本机的jQuery版本"> <script> $(function(){ 写jQuery语句。 $('a').hover( 直接选出a标签语句。 function(){ $(this.stop().animate({"width":"160px"},200) 定义宽度和延时。 }鼠标移入的的动作； function(){ $(this.stop().animate({"width":"120px"},200) 定义宽度和延时。【当动画打开的时候先把上一个动画清理掉】 }鼠标移出的的动作； ) } </script> </script>查看全部
-
增加JavaScript脚本，添加鼠标移过的动画效果。 样式代码： <head> <script> windows.onload=function() DOM执行完后再执行以下代码。 { var aA=document.getElementsByTagName('a') 表示a标签的个数。 for(var i=0;i<aA.length;i++) aA[i].onmounseover=function(){ clearInterval(This.time) 动画开始的时候将其先清理一下。 var This=this; This.time=setInterval(function(){建定时器：包括匿名函数和定时器【每30毫秒运行一次】。 This.style.width=This.offsetWidth+8+"px"; if(This.offsetWidth>=160){ clearInterval(This.time) } },30) } aA[i].onmounseout=function(){ clearInterval(This.time) 动画开始的时候将其先清理一下。 var This=this; This.time=setInterval(function(){建定时器：包括匿名函数和定时器【每30毫秒运行一次】。 This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width="120px"; clearInterval(This.time) } },30) } } </script> </head> <ul class="nav"> <li class-"on" href="#">/<li> <li href="#"></li> <li href="#"></li> </ul>查看全部
-
设置鼠标移过时，高度增加：【不设置圆角边框图片的情况下】 去掉a标签中的背景图片、和其位置的移动设置。重新增加鼠标移过时的背景颜色。 再添加移过鼠标时的a标签的高度height:40px，垂直居中：line-height:40px;并设置其margin-top:-10px;向上移动【因为增加高度后，默认向下增加】查看全部
-
因为设置li的float,使ul失去了宽度和高度，所以要进行整体背景的设置，需添加ul高度。 再添加底部边框的粗度和颜色：ul{height:50px;border-bottom:5px solid grage;padding-left:30px;} 使li向下移动：li{margin-top:20px;} 圆角边框：a{background:添加背景图片;} .on a{去除a标签背景色;background-position:0 -30px;}水平位置不变，向下移动30px.【background-position:x y;正数则以图片左上角为原点分别向右向下移动，负数则分别向左向上移动】 添加<a class+"on"></a>查看全部
-
水平菜单的制作：在垂直菜单的基础上修改。 将ul宽度去掉； 设置li{float：left;} 设置ul li a{text-align:center;}水平居中，并将文本缩进删掉。查看全部
-
利用无序列表构建垂直菜单： <ul> <li><a href="#"></a></li><li><a href="#"></a></li> </li> 样式清除：*{padding:0;margin:0;font-size:14px;} 去除链接连接下划线:a{texr-decoration:none;} ul{list-style:none;width:100px;} 一种方法：设置li标签。 li{height:30px;lin-height:30px;width:100px;background-color:blue;margin-bottom:1px;text-indent:20px;} 另一种方法：设置a标签。设置a标签为块元素。 ul li a{display:block;}再将li中的设置移到a标签中。 a:hover{background-color:grage;color:white;}查看全部
-
display：block；查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高查看全部
-
.如果要给水平菜单增加整体背景，需要对width & height进行CSS设置 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
background-position: 15px 20px;(指将图片向右移15px,向下移20px;) 简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负查看全部
-
伸缩菜单，增加相应的高度，再添加相应的负margin-top值，元素高度是向下扩展的过程查看全部
-
需要学习查看全部
举报
0/150
提交
取消