DIV模拟的select下拉框

最新推荐文章于 2018-05-11 11:18:25 发布

jp0520

最新推荐文章于 2018-05-11 11:18:25 发布

阅读量136

点赞数

分类专栏： JAVASCRIPT 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/jp0520/article/details/84060540

版权

JAVASCRIPT 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>一款DIV+CSS+JS模拟的select下拉框丨芯晴网页特效丨CsrCode.Cn</title>
<script type="text/javascript" >
function getElement(_sId){
return document.getElementById(_sId);
}
function hide(_sId)
{
var obj = getElement(_sId);
getElement('HMF-1').style.display = getElement('HMF-1').style.display == "none" ? "" : "none";
getElement('HMF-1').style.position="absolute";

}
function pick(v) {
document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
document.getElementById(id).style.background="#F7FFFA";
document.getElementById(id).style.color="#000";
}
function nocolor(id){
document.getElementById(id).style.background="";
document.getElementById(id).style.color="#788F72";
}

</script>
<style type="text/css">
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#FF0000;width:80px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#FF0000;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 80px;}
</style>
</head>
<body>
<br><br>点击下面按钮查看预览效果：
<form>
<tr>
<input style="width:75px" οnclick="hide('am')" type="text" value="0" id="am" /><br/>
</tr>

<div id="HMF-1" style="display: none " class="bm">
<span id="a0" οnclick="pick('0')" onMouseOver="bgcolor('a0')" onMouseOut="nocolor('a0')" class="cur">0</span>
<span id="a1" οnclick="pick('1')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">1</span>
<span id="a2" οnclick="pick('2')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">2</span>
<span id="a3" οnclick="pick('3')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">3</span>
<span id="a4" οnclick="pick('4')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">4</span>
<span id="a5" οnclick="pick('5')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">5</span>
<span id="a6" οnclick="pick('6')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">6</span>
<span id="a7" οnclick="pick('7')" onMouseOver="bgcolor('a7')" onMouseOut="nocolor('a7')" class="cur">7</span>
<span id="a8" οnclick="pick('8')" onMouseOver="bgcolor('a8')" onMouseOut="nocolor('a8')" class="cur">8</span>
<span id="a9" οnclick="pick('9')" onMouseOver="bgcolor('a9')" onMouseOut="nocolor('a9')" class="cur">9</span>
</div>

</form>
</body>
</html>

jp0520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV模拟的select下拉框

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv=&q
复制链接

扫一扫

专栏目录