js+CSS实现模拟华丽的select控件下拉菜单效果


Posted in Javascript onSeptember 01, 2015

本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下:

这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题。

运行效果截图如下:

js+CSS实现模拟华丽的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=utf-8" />
<title>模拟select控件</title>
<style> 
html,body{height:100%;overflow:hidden;}
body,div,form,h2,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#23384e;font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
#search,#search form,#search .box,#search .select,#search a{background:url(images/search.jpg) no-repeat;}
#search,#search .box,#search form{height:34px;}
#search{position:relative;width:350px;margin:10px auto;}
#search .box{background-position:right 0;}
#search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}
#search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}
#search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}
#search a:hover{color:#f60;background-position:-80px -90px;}
#search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}
#search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}
#search .sub li.hover{background:#8b8b8b;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var oSelect = document.getElementsByTagName("span")[0];
 var oSub = document.getElementsByTagName("ul")[0];
 var aLi = oSub.getElementsByTagName("li");
 var i = 0;
 oSelect.onclick = function (event)
 {
  var style = oSub.style;
  style.display = style.display == "block" ? "none" : "block";
  //阻止事件冒泡
  (event || window.event).cancelBubble = true
 };
 for (i = 0; i < aLi.length; i++)
 {
  //鼠标划过
  aLi[i].onmouseover = function ()
  {
   this.className = "hover"
  };
  //鼠标离开
  aLi[i].onmouseout = function ()
  {
   this.className = "";
  };
  //鼠标点击
  aLi[i].onclick = function ()
  {
   oSelect.innerHTML = this.innerHTML 
  }
 }
 document.onclick = function ()
 {
  oSub.style.display = "none"; 
 };
};
</script>
</head>
<body>
<div id="search">
 <div class="box">
 <form>
  <span class="select">请选择游戏名称</span> 
  <a href="javascript:;">搜索</a>
 </form>
 </div>
 <ul class="sub">
 <li>地下城与勇士</li>
 <li>魔兽世界(国服)</li>
 <li>魔兽世界(台服)</li>
 <li>热血江湖</li>
 <li>大话西游II</li>
 <li>QQ幻想世界</li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
巧用canvas
Jan 21 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
贷款收入证明范本
2015/06/12 职场文书
贫困证明书范文
2015/06/16 职场文书
运动会开幕式致辞
2015/07/29 职场文书