最近给公司的培训生上HTML&CSS&JS方面的课,作为练习要他们做个BBS简单的几个页面。有位同学想实现带图片的select。
就写了个简模拟带图片select的插件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带图片的select模拟</title>
<style>
.select{
border:#00FF00 solid 1px;
width: 40px;
height: 18px;
padding:2px 2px 2px 2px;
}
.selector{
border:#00FF00 solid 1px;
width:44px;
height:200px;
margin-top:3px;
display:none;
}
ul{
list-style:none;
margin:5px;
padding:inherit;
}
li{
margin-bottom:5px;
text-align:center;
}
</style>
<script type="text/javascript" language="javascript">
var setTimeOutResult;
function showSelector(visiable){
clearTimeout(setTimeOutResult);
setTimeOutResult = setTimeout(_showOrHidden(visiable),500);
}
function _showOrHidden(visiable){
return function showOrHiddenSelector(){
e('selector').style.display = visiable;
}
}
function chooseImg(src){
e('choosedImg').src=src;
e('selector').style.display = "none";
}
function e(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div class="select" onMouseOver="showSelector('block');"
οnmοuseοut= "showSelector('none');">
<nobr>
<img src="image/icon1.gif" id="choosedImg" align="absmiddle"/>
<img src="image/arrow_down.gif" align="absmiddle"/>
</nobr>
</div>
<div class="selector" id="selector" onMouseOver="showSelector('block');"οnmοuseοut="showSelector('none');">
<ul>
<li><img src="image/icon2.gif" οnclick="chooseImg(this.src)"/></li>
<li><img src="image/icon3.gif" οnclick="chooseImg(this.src)"/></li>
<li><img src="image/icon4.gif" οnclick="chooseImg(this.src)"/></li>
<li><img src="image/icon5.gif" οnclick="chooseImg(this.src)"/></li>
<li><img src="image/icon6.png" οnclick="chooseImg(this.src)"/></li>
</ul>
</div>
</body>
</html>
图片:arrow_down.gif: icon1.gif: icon2.gif: icon3.gif: icon4.gif: icon5.gif: icon6.png: