DIV+CSS+JS仿Select下拉表单网页特效源代码下载
2014-08-25 09:29
721 查看
DIV+CSS+JS仿Select下拉表单
原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载
源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm
原文: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>
相关文章推荐
- DIV+CSS+JS仿Select下拉表单网页特效源代码下载
- 基于CSS 和JS的网页SELECT下拉框美化,JQUERY 插件
- JS + CSS 美化 select 下拉框表单
- JS+DIV+CSS实现仿表单下拉列表效果
- dIV+CSS+JS仿的兼容性很好的下拉选择表单
- 如何用css和div控制html页面中的下拉列表框(select)
- 下拉水平菜单 js div+css 超实用 可链接数据库
- 在MFC下实现POST网页表单,下载服务器文件或取得网页源代码
- 网页添加div 遮罩层 js+css 半透明效果
- 用Jquery模拟的div-css.com中的JS特效
- CSS+DIV下拉导航栏(JS)收集
- 由网页下载程序(完美下载图片、js、css、修改网页)解析三大网页难题
- 由网页下载程序(完美下载图片、js、css、修改网页)解析三大网页难题
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- div+css - 工具 - 微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 下载
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- 下拉的DIV+CSS+JS二级树型菜单,刷新无影响
- 用div+js+css模拟select
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理