-
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); } } };查看全部
-
ul的高度为50px;il的margin-top为20px,a的高度为30px,将il的content撑高30px使得il刚好填满ul的content部分,所以当a:hover为40px是会向下溢出10px,所以需要设置margin-top:-10px. 如果设置margin-bottom:-10px,则a和li的content+li的margin-top刚好填满ul的content;正是由于刚好填满ul的content,a上不能向上撑开,效果上还是看到多出来的10px在a的下部.查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后一动它的位置（y，x） 例：background-position: 15px 20px;(指将图片向右移15px,向下移20px;) 简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负查看全部
-
ul{ list-style:none} 清除ul 前面的原点查看全部
-
把a标签定义成行内块 display:block 文字缩进20px text-indent:20px查看全部
-
shuipingcaidanzhizuo查看全部
-
zhizuoyuanjiaocaidan查看全部
-
shuipingcaidan查看全部
-
shuipingcaidan查看全部
-
caidandezhizuo查看全部
-
caidanzhizuo查看全部
-
a标签的设置查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
caidanzhizuo查看全部
-
caidan查看全部
举报
0/150
提交
取消