-
背景图片偏移： background-position:x y; x，y为偏移量查看全部
-
overflow:hidden实现隐藏 鼠标经过，修改该属性值为visible即可 eg：this.getElementsByTagName('ul')[0].style.overflow="visible"; 同理，jquery，也是修改overflow $(this).find('.subNav').css("overflow","visible"); other:jQuery中的show 和hide 方法似乎只对display:none的隐藏方式有效查看全部
-
菜单动画特效查看全部
-
JQuery在打开动画之前同样要关闭上一个动画（.stop()方法）查看全部
-
动画开始之前清理上一个动画，避免动画叠加。查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
清除计时器：clearInterval 设定计时器：setInterval a标签的宽度：offsetWidth查看全部
-
<li>文字要垂直居中，要在<li>height属性=line-height查看全部
-
a标签本来是内联元素，要把它设置成block元素。 然后把本来对li设置的属性，变成是a的属性查看全部
-
padding-left:10px; 会导致宽度也增加10px text-indent:10px; 字会向右移10px但框的宽度不会增加 text-indent//缩进 用text-indent替换padding-left是为了防止菜单长度增加。查看全部
-
2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } ) }) 说明： $(function(){})相当于window.onload，但比它的性能要好。 stop是把前一个动画清理掉查看全部
-
伸缩菜单的制作——水平方向: 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); } } };查看全部
-
border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */查看全部
-
padding-left:10px; 会导致宽度也增加10px text-indent:10px; 字会向右移10px但框的宽度不会增加查看全部
-
<ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> ...... </ul> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;width:100px;} a{text-decoration:none;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;} a:hover{background-color:#f60;color:#fff;} 提示： ul li a{display:block;} 定义的关键是将<a>标签设置为块元素查看全部
举报
0/150
提交
取消