8顶

一个div+css+js仿select下拉表单选择的特效代码

稿源：互联网 2018-09-20 00:55:38 点击： 16575 撤稿纠错

一个div仿select下拉的效果，用DIV+CSS+JS实现。。

以下讨论的是和select 下拉表单相关的一个div+css+js仿select下拉表单选择的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>阿里西西特效演示页，DIV+CSS+JS仿下拉表单_ demo by js.alixixi.com</title>
<script type="text/javascript" >
function $$$$$(_sId){
 return document.getElementById(_sId);
 }
function hide(_sId)
 {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
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";
}

window.onload = function()
{
$$$$$("am").onmouseover = function(){window.onclick = null;}
$$$$$("am").onmouseout = function(){window.onclick = function(){$$$$$("HMF-1").style.display = "none";}}
}

</script>
<style type="text/css">
* { margin:0px; padding:0px; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.cur { cursor:pointer; display:block; color:#788F72; width:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; }
.am { border: 0px; color:#788F72; cursor: pointer; background: url(http://www.alixixi.com/images/icon_list_on2.gif) no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; }
.bm { border: 1px #999999 solid; width:73px; margin-left:10px; }
</style>
</head>
<body>
<form>
    <input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
    <div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span> <span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span> <span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span> <span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span> <span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span> <span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span> </div>
</form>


</body>
</html>

关于一个div+css+js仿select下拉表单选择的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092086066.shtml方便下次再访问哦。

·上一篇： 鼠标滑过表格内单个单元格的背景变色特效
·下一篇： 分享一个公司活动中使用员工人员姓名来进行随机抽奖的程序特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一个div+css+js仿select下拉表单选择的特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻