前端新手记录自己在网络上找到的前端练习项目。昨天去通州考试，早上五点出发赶第一班地铁，真是累的要死。
项目简介
一个简单的select控件，点击出现下拉菜单，可以进行选择。
select控件.gif
html部分
主要包括一个表单和一个列表。
<body>
<div id="search">
<div class="box">
<form>
<span class="select">请选择游戏名称</span>
<a href="javascript:;">搜索</a>
</form>
</div>
<ul class="sub">
<li>地下城与勇士</li>
<li>魔兽世界</li>
<li>DOTA2</li>
<li>大话西游II</li>
<li>QQ幻想世界</li>
<li>热血江湖</li>
<li>炉石传说</li>
</ul>
</div>
</body>
CSS部分
CSS部分比较特别的是一个所有背景放到了一张图片上，这样的好处是可以减少HTTP连接次数，提高网页加载速度。
<style>
html, body {
height: 100%;
overflow: hidden;
}
body, div, form, h2, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #23384e;
font-size: 12px/1.5 Microsoft YaHei;
}
#search, #search form, #search .box, #search .select, #search a {
background: url(img/search.jpg) no-repeat;
}
#search, #search.box, #search form {
height: 34px;
}
#search {
position: relative;
width: 350px;
margin: 10px auto;
}
#search .box {
background-position: right 0;
}
#search form {
background-repeat: repeat-x;
background-position: 0 -34px;
margin: 0 20px 0 40px;
}
#search .select {
float: left;
color: #fff;
width: 190px;
height: 22px;
cursor: pointer;
margin-top:4px;
line-height: 22px;
padding-left: 10px;
background-position: 0 -68px;
}
#search a {
float: left;
width: 80px;
height: 24px;
color: #333;
letter-spacing: 4px;
line-height: 22px;
text-align: center;
text-decoration: none;
background-position: 0 -90px;
margin: 4px 0 0 10px;
}
#search a:hover {
color: #f60;
background-position: -80px -90px;
}
#search .sub {
position: absolute;
top: 26px;
left: 40px;
color: #fff;
width: 198px;
background: #2b2b2b;
border: 1px solid #fff;
display: none;
}
#search .sub li{
height: 25px;
line-height: 24px;
cursor: pointer;
padding-left: 10px;
margin-bottom: -1px;
border-bottom: 1px dotted #fff;
}
#search .sub li.hover {
background: #8b8b8b;
}
</style>
background-position属性
设置背景图像（由background-image设置）的起始位置。
letter-spacing属性
letter-spacing 属性增加或减少字符间的空白（字符间距）。
text-decoration属性
规定添加到文本的修饰,本项目用来去除链接上默认的下划线。
javascript部分
<script>
var oSelect = document.getElementsByTagName("span")[0];
var oSub = document.getElementsByTagName("ul")[0];
var aLi = oSub.getElementsByTagName("li");
var i = 0;
oSelect.onclick = function(event) {
var style = oSub.style;
style.display = style.dispaly == "block" ? "none" : "block";
//阻止事件冒泡
(event || window.event).cancelBubble = true;
};
for(i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
this.className = "hover";
};
aLi[i].onmouseout = function() {
this.className = "";
};
aLi[i].onclick = function() {
oSelect.innerHTML = this.innerHTML;
}
}
document.onclick = function() {
oSub.style.display = "none";
}
</script>
主要是给元素添加事件，比较值得注意的时cancalBubble
属性，可以通过把他的值设置为true来阻止事件冒泡。
总结
比较简单的小项目，主要也是练习对DOM元素的事件的掌握和对select空间的学习。项目源码地址https://github.com/yunkai123/WebProjectStudy。
网友评论