【fgm.cc练习4-1】setTimeout应用：重点不是setTimeout，而是各种布局令我头大

练习地址：http://www.fgm.cc/learn/lesson4/01.html

具体的解释我放在代码的注释里面了。我写得好艰难啊！布局这块还是太low了我。还把sublime给搞坏了，安装了很多插件，以为很好用，结果快捷键冲突了，按照网上的方法尝试，至今未解。望指点迷津！感谢。

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>setTimeout应用</title><link rel="stylesheet" type="text/css" href="1_setTimeout.css">
</head>
<body><div id="nav"><ul><!-- 这里用span是因为hover时的透明只加在span上，而不是整个li上（否则也会透明要hide的部分） --><!-- 但是透明框的应该有边距，这点没想办法设置好 --><li><span class="choose">站长之家</span></li><li><span class="choose">行业资讯</span><!-- arrow用来画箭头，也就是对话框指向li的箭头 --><div class="arrow"><div></div></div><!-- 这里设置两个class是因为：虽然大家的class都是hide但是因为父元素不同所以没办法用nth-of-child选择单个 --><div class="hide first"><!-- 这里用span是参考网源代码的，本来我是用li但是太复杂了（选择器没学好 --><span><a>业界动态</a>|<a>收购融资</a>|<a>门户动态</a>|<a>搜索引擎</a>|<a>网络游戏</a>|<a>电子商务</a>|<a>广告传媒</a>|<a>厂商开发</a></span></div></li><li><span class="choose">站长在线</span><div class="arrow"><div></div></div> <div class="hide second"> <span><a>站长报道</a>|<a>好站推荐</a>|<a>站长聚会</a>|<a>站长访谈</a>|<a>站长茶馆</a>|<a>网站排行</a></span></div></li><li><span class="choose">网站运营</span><div class="arrow"><div></div></div><div class="hide third"> <span><a>建站经验</a>|<a>策划盈利</a>|<a>搜索优化</a>|<a>网站推广</a>|<a>免费资源</a></span></div></li><li><span class="choose">设计在线</span><div class="arrow"><div></div></div><div class="hide forth"><span><a>酷站推荐</a>|<a>网页设计</a>|<a>WEB标准</a>|<a>视频处理</a>|<a>设计活动</a></span></div></li><li><span class="choose">网络编程</span><div class="arrow"><div></div></div><div class="hide fifth"><span><a>Asp编程</a>|<a>Php编程</a>|<a>.Net编程</a>|<a>Xml编程</a>|<a>Access</a>|<a>Mssql</a>|<a>Mysql</a></span></div></li><li><span class="choose">联盟资讯</span><div class="arrow"><div></div></div><div class="hide sixth"><span><a>联盟动态</a>|<a>联盟介绍</a>|<a>联盟点评</a>|<a>网赚技巧</a></span></div></li><li><span class="choose last">服务器</span><div class="arrow"><div></div></div><div class="hide seventh"><span><a>Web服务器</a>|<a>Ftp服务器</a>|<a>Mail服务器</a>|<a>Dns服务器</a>|<a>Win服务器</a>|<a>Linux服务器</a>|<a>安全防护</a>|<a>虚拟主机</a></span></div></li>        </ul></div><script src="1_setTimeout.js"></script>
</body>
</html>

CSS

body,div,ul,li {margin: 0;padding: 0;
}
#nav {width: 750px;height: 28px;padding: 3px 8px;margin: 5px auto;background: linear-gradient(to bottom,#99CCFF,#556699);font-size: 14px;/*overflow: hidden;*/
}
li {position: relative;color: white;list-style-type: none;float: left;/*z-index: 99;*//*这里设置li的高度是为了可以hover弹出框，hover nav下面的时候还在鼠标事件上*/height: 60px;
}.choose {display: block;padding: 5px 18px;border-right: 1px solid #99CCFF;
}
.last {border: none;
}
.choose:hover {cursor: pointer;font-weight: bold;/*设置透明框*/background: rgba(286,286,286,0.5);
}
.hide {position: absolute;top: 40px;border: 1px solid #0099CC;/*border-radius: 8%;*/padding: 1px;color: #556699;background: linear-gradient(to bottom,#FFFFFF,#CCCCCC);display: none;z-index: 1;cursor: pointer;
}
.first {width: 620px;
}
.second {width: 460px;
}
.third {width: 400px;
}
.forth {width: 400px;left: -50px;
}
.fifth {width: 500px;left: -250px;
}
.sixth {width: 320px;left: -150px;
}
.seventh {width: 720px;left: -650px;
}
.hide a {margin: 0 7px;
}
.hide a:hover {text-decoration: underline;
}
.arrow {width: 0;border: 8px solid #0099CC;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid transparent;position: absolute;top: 25px;left: 40px;display: none;/*箭头覆盖弹出框的边界*/z-index: 99;
}.arrow>div {width: 0;border: 5px solid white;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid transparent;position: absolute;left: -5px;top: -2px;z-index: 99;
}

JavaScript

window.onload = function() {var choose = document.getElementsByTagName("li");var hide = document.getElementsByClassName("hide");var arrow = document.getElementsByClassName("arrow");for(var i=1; i<choose.length; i++){// 用onmouseover事件会产生闪烁choose[i].onmouseenter = (function(n) {return function() {for(var j=0; j<hide.length; j++){hide[j].style.display = "none";arrow[j].style.display = "none";}hide[n-1].style.display = "block";arrow[n-1].style.display = "block";}})(i);choose[i].onmouseleave = (function(n) {return function() {// 这里就是练习的目的吧，然而我在别处掉坑了好多次哦setTimeout(dispear,300);function dispear() {hide[n-1].style.display = "none";arrow[n-1].style.display = "none";}}})(i);}
};

【fgm.cc练习4-1】setTimeout应用：重点不是setTimeout，而是各种布局令我头大相关推荐

Android开发重点难点1：RelativeLayout(相对布局)详解
前言啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出"重点难 ...
javascript真的是异步的吗？且看setTimeout的实现原理以及setTimeout(0)的使用场景
在今天之前我一直以为setTimeout这个函数是异步的,无意中看到了一篇关于setTimeout的文章.发现自己曾经的认识全是错误的,赶紧总结下. 先看一段代码: var start = new D ...
setTimeout和cleartimeout()，再settimeout执行到一半后，正确的使用cleartimeout()删除
//如何设置间隔几秒以后再消失 var conEI_setTime; conEI.mouseleave(function () { t = setTimeout(function () { $(&qu ...
JS setTimeout 与 setInterval
事件流逝触发的事件这类事件不是基于用户针对可见Web页面元素执行的行为,而是基于时间的流逝. 和JavaScript中所有其他事件一样,这些时间流逝事件也是由函数处理的. setTimeout() ...
JavaScript 中的 setTimeout 和 setInterval 方法
有时您不希望函数立即运行.您希望它重新执行,甚至在特定时间间隔后重复运行.JavaScript 为我们提供了两种实现方法: setTimeout 和 setInterval.下面,我们将来理解这两个方 ...
setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）
本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...
setTimeOut()和setInterval()的用法
setTimeOut()和setInterval()的用法 setTimeOut(function(){},1000); 在特定时间之后调用函数,只调用一次 setInterval(function( ...
前端知识点回顾之重点篇——JavaScript异步机制
JavaScript异步机制来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...
JS中setTimeout()的使用方法具体解释
1. SetTimeOut() 1.1 SetTimeOut()语法样例 1.2 用SetTimeOut()运行Function ...
前端定时器 setInterval 和 setTimeout
前端定时器 setInterval 和 setTimeout 1.setInterval 循环执行设置循环执行销毁定时器 2.setTimeout 定时执行设置定时执行 3. setTimeou ...

【fgm.cc练习4-1】setTimeout应用：重点不是setTimeout，而是各种布局令我头大

HTML

CSS

JavaScript

【fgm.cc练习4-1】setTimeout应用：重点不是setTimeout，而是各种布局令我头大相关推荐

最新文章

热门文章