-
总结2查看全部
-
总结1查看全部
-
Jquery..实现下一个动画时..清理前一个动画 stop()查看全部
-
Jquery实现导航栏水平缩进 <script> $(function(){ $('.a').hover( function(){ $(this).animate({"width":"160px"},300); }, function(){ $(this).animate({"width":"120px"},300); } ) }) </script>查看全部
-
在鼠标进入 和 移开 时 先清理动画，以免累加 clearInterval查看全部
-
鼠标移开时 回复原来的宽度---JS <script> /* window.onload Dom加载完以后执行以下代码 */ window.onload=function(){ var aA=document.getElementsByClassName('a'); for(var i=0;i<aA.length;i++){ 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) } } } </script>查看全部
-
将a标签变成块级元素：display:block;查看全部
-
鼠标划过时，宽度增加到160px----JS <script> /* window.onload Dom加载完以后执行以下代码 */ window.onload=function(){ var aA=document.getElementsByClassName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function(){ clearInterval(this.time); var This=this; /* setInterval定时器 每30毫秒运行一次 */ This.time=setInterval(function(){ /* 设置它的宽度：当前宽度 变宽的速度 */ This.style.width=This.offsetWidth+8+"px"; if(This.offsetWidth>=160){ clearInterval(This.time) } },30) } } } </script>查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后通过background-position来动一动它的位置（x，y）查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
伸缩菜单的制作--水平方向--js控制查看全部
-
1.用ul无序列列表构建菜单 2.清除默认样式 *{margin:0;padding:0;} 清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点 去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用 height: 30px;line-height: 30px;可使文字垂直居中。 3.如果用为文字前面增加像素，最好用缩进的方式来实现 {text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） 4.ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;} *{ } （用于全局设置）查看全部
-
margin技巧查看全部
-
伸缩菜单制作--鼠标划过时，高度发生变化 .nav4{ list-style: none; height: 50px; border-bottom: 5px solid #f60; padding-left: 30px; } .nav4 li{ float: left; margin-top: 20px; } .nav4 li a{ display: block; text-decoration: none; height: 30px; line-height: 30px; width: 100px; background-color: #ccc; text-align: center; } .nav4 .on,.nav4 li a:hover{ color: #fff; background-color: #f60; height:40px; /*让文字在行内垂直居中显示*/ line-height: 40px; margin-top: -10px; } <div class="part4"> <ul class="nav4"> <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> </div>查看全部
-
这节导航菜单定位多看看查看全部
举报
0/150
提交
取消