模拟带图片的select简单插件

最新推荐文章于 2022-11-10 18:08:29 发布

原创最新推荐文章于 2022-11-10 18:08:29 发布 · 置顶 · 897 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #xhtml #class #bbs #html

web前端专栏收录该内容

2 篇文章

订阅专栏

最近给公司的培训生上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');" 
	     onmouseout= "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');"onmouseout="showSelector('none');">
			<ul>
				<li><img src="image/icon2.gif" onclick="chooseImg(this.src)"/></li>
				<li><img src="image/icon3.gif" onclick="chooseImg(this.src)"/></li>
				<li><img src="image/icon4.gif" onclick="chooseImg(this.src)"/></li>
				<li><img src="image/icon5.gif" onclick="chooseImg(this.src)"/></li>
				<li><img src="image/icon6.png" onclick="chooseImg(this.src)"/></li>
			</ul>
		</div>
</body>
</html>

图片：arrow_down.gif: icon1.gif: icon2.gif: icon3.gif: icon4.gif: icon5.gif: icon6.png: