-
导航栏原来a高度是30px，当鼠标经过时，高度纵向上高出10px，并且字体保持居中，方法： a:hover{height:40px;margin-top:-10px;line-height:40px;} 使用margin的负值可实现向下移动查看全部
-
1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ if(This.offsetWidth>=160){ clearInterval(This.time); } },30); } aA[i].onmouseout=function (){ clearInterval(This.time); var This=this; This.time=setInterval(function (){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width="120px"; clearInterval(This.time); } },30); } } }; 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } )) })查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
jq方法： <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function () { $("a").hover( function(){ $(this).animate({"width":"160px"},200); }, function(){ $(this).animate({"width":"120px"},200); } ) }) </script> ps.函数之间要加逗号！！！！！！查看全部
-
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。查看全部
-
setIv查看全部
-
123查看全部
-
background-position:0 -30px; 背景图片沿Y轴向上移动30px。查看全部
-
当鼠标移动到相应的导航菜单一栏时，使相应的高度向上延伸： 1.增加高度； 2.margin用负数，向反方向移动（例：margin-top：-20px），整体就向上移动了20px查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
利用float将纵向的菜单变为横向的菜单查看全部
-
text-indent:缩进，但是不改变总宽度查看全部
-
a{display:block;}将a标签变成块查看全部
-
用无序列表构建菜单查看全部
-
改变外观查看全部
举报
0/150
提交
取消