DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单

源代码下载地址：http://www.zuidaima.com/share/1550463331830784.htm

<!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=utf-8" />
<title>DIV+CSS+JS仿下拉表单-www.zuidaima.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";
}
</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:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#788F72;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: 148px; 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('www.zuidaima.com')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span>
 <span id="a3" onclick="pick('java')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span>
 <span id="a4" onclick="pick('html')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span>
 <span id="a5" onclick="pick('springmvc')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span>
 <span id="a6" onclick="pick('spring')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span>
</div>
</form>
</body>
</html>

时间： 2024-07-31 22:10:37

DIV+CSS+JS仿Select下拉表单网页特效源代码下载的相关文章

css解决select下拉表单option高度的办法

css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好多资料,最好的解决办法也是大神们用js来模拟下拉表单.额~,好吧,暂且就按照大神们的办法来解决这个问题吧. 下边来说说css如何解决select的option高度的? 有时我们在设置了select的高度后,发现其option的高度还是默认的高度,跟我们设置的select的高度大相径庭,很显然,这不是

JS为Select下拉框增加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路很新颖,也不知到底有多少人需要select可输入文字的功能,下面是详细的实现代码:前端资源分享 .代码 <div style="position:relative;">

jsp简单练习-简单的下拉表单

<%@ page contentType="text/html; charset=gb2312" %> <html> <body> <form name="form1" action="SwitchApp.jsp" method="post"> 请选择一种颜色: <select name="ys"> <option value="r

制作下拉表单

第一步设置好初步样式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉表单</title> 6 </head> 7 <body> 8 <ul class='ul_all'> 9 <li class='li_1'> 10 <a h

[Django]下拉表单与模型查询

前言:本文主要针对自定义下拉表单制作,下拉表单的内容是取至于数据库,即动态实现下拉表单正文: 动态实现下拉表单有两种方法: 一.自己手动写 html 模板中的 <form ...> </form> 在views 中,将所需要的数据传递过去,比如 names_list = [1, 2, 3, 4] 在 html 中 <select> {% for x in name_list %} <option value ="{{ x }}">{{

cocos2d-html5 简易下拉表单控件

刚才在CH5的群里问了问有没有大侠写过下拉表单控件啊! 没人鸟窝 ,DZ老师表示非常伤心啊 ,于是乎自己写一个把共享给大家. 效果图上一个仅仅实现了一个最最主要的控件非常easy 别吐槽啊,以后有空我会完好一下的,假设有朋友自愿帮忙完好一下就更好了. 有不论什么问题请加DZ老师的QQ 460418221 引擎版本号 : 2.2.2 原理:有空再写吧源代码: /** * Created with JetBrains WebStorm. * User: Dz_Yang *

js解决select下拉问题

当事件mouseover中出现select下拉框时,select下拉是选不中的,解决办法: var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined.. if (!o) return;//为option退出不隐藏完整代码案例为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

JS为Select下拉框添加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路非常新颖,也不知究竟有多少人须要select可输入文字的功能,以下是具体的实现代码:前端资源分享 .代码 <div style="position:relative;">

JS获取select下拉框选中的value或者其name

举例: <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hid"> $("#hid option:checked").text() //这是获取下拉框显示出来的值 [hid为select标签的id] $("#hid option:checked"