-
2016年3月23日 6-2代码任务 一.代码中的if(oSubNav)，有作用么，去掉可否： 答：不可以去掉，那个是判断你鼠标所在的导航上是不是还有二级导航，如果有就没有问题，如果没有二级导航，你也不加判断，后面的代码就会报错。 二. 常犯的错误： 1.代码要注意缩进 特别是（）{}这些的作用域， 2.有错别字，对象没改到。 3.估有点昏 先是全局的 然后是 for的 然后才是事件的 三.关于this.property （JS的this还是不清晰） 1.不该定义timer，应该挂载到每个li下面，这样不至于出现多个li争抢一个timer发生下滑菜单颤动纠结的现象； ——问：具体该怎么定义timer呢，见2； 2.不要写timer，写this.time即可（即把time挂到每个ul下) clearInterval(this.time); this.time = setInterval 3.这里的time并非一个变量，而是可以看作为是当前元素的一个自定义属性，不是该元素自带的属性，而是我们自己人为添加上去的，这个是可以直接赋值使用的不需要声明的。例如document.getElementById ('txtBox').setAttribute("haahaha","123456");这样也是允许的（后面的.getElement…….setAttribute）？？还是不明白 4.为什么二级菜单中的li也能找到ul？由此触发了ul高度增加... 把ul的背景设为可见色，便可以发现在鼠标经过二级菜单时，也会触发ul的高度增加： 具体代码如截图查看全部
-
hover鼠标悬停查看全部
-
关于增加clearInterval以免动画累加的部分解释： 一、 如果不先clearInterval，当你快速在导航的一个菜单上移上移下时，会出现闪烁（就是不停地+8 -8交替），包括本节第六章最后的编程练习，是制作下拉菜单，菜单宽度从0加到120，每5ms增加4，在停止增加前，需要120/4 *5=150ms,如果鼠标移上菜单很快（150ms）之内移了下来，就会触发鼠标移开事件，即每隔5ms减少4，这时候就会出现增加减少同时进行的情况，导致子菜单长度不变了，但是却不停地闪烁，由于此时既不能增到120，又不能减到0，所以两个if clearInterval都不会启动，所以呢，在触发onmouseover,onmouseout任何一事件的时候，都要把另一件事所触发的计时器停止，不管你有没有执行到终点，所以要在一开始就clearInterval，为的是除去对方事件里还没有被停的setInterval。 二、 当我们定义了一个定时器以后，我们可以通过事件来触发这个定时器开始工作，例如：点击按钮，让一个div的宽度从1px加宽到1000px，根据我们的设定步长（比如，10px/毫秒），就会产生一个动画效果。试想一下，在这个加宽的动画还没有结束时，我们再次点击了按钮，此时，又会有一个新的定时器开始工作，此时，有两个定时器，同时作用在这个div的动画上，整个的动画速度就会加倍，你点击按钮的次数越多，累加的定时器越多，动画速度也会越快，这当然不是我们想要的结果。 解决办法就是，我们在定义定时器的时候，定义一个定时器变量，每次点击按钮的时候，利用clearInterval先把所有的定时器清除掉，再开始新定时器，这样就能保证定时器的正常工作。查看全部
-
1.aLi是页面中所有的li对象的集合,故存在有点li对象没有二级菜单subNav,所以这里要加一个判断if(osubNav),以防页面报错查看全部
-
伸缩菜单 *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px; margin-top:-10px;} </style> </head> <body> <ul> <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> </body> </html>查看全部
-
clearInterval setInterval查看全部
-
padding-top:10px; margin-top:-10px; 实现了垂直高度变化，但文字没有垂直居中 height:40px;line-height:40px;margin-top:-10px:所以还是使用老师的方法比较好。先保证文字居中，再向上移动增加出的px查看全部
-
background-position背景图片发生位移查看全部
-
水平导航 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} li{ float:left} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>查看全部
-
a:hover 为菜单增加交互效果（选中样式）查看全部
-
*{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a href="#">首  页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li>查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
margin-top 向上10个px.查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
ul{list-style:none;}是为了清除ul li 前边的圆点 padding会增加元素宽度，text-indent不会增加原有宽度（文本缩进）查看全部
举报
0/150
提交
取消