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 相关文章推荐
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
杏林同学录(九)
2006/10/09 PHP
PHP一些有意思的小区别
2006/12/06 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python将图片转换为字符画的方法
2020/06/16 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python中安装django模块的方法
2020/03/12 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
会计学习心得体会
2014/09/09 职场文书
先进工作者申报材料
2014/12/23 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
小学体育教学随笔
2015/08/14 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Java数组详细介绍及相关工具类
2022/04/14 Java/Android