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学习笔记一 之 数据类型
Dec 15 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
详谈javascript中的cookie
Jun 03 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
初步剖析C语言编程中的结构体
2016/01/16 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python编写简单端口扫描器
2019/09/04 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python 命名规范知识点汇总
2020/02/14 Python
python小白切忌乱用表达式
2020/05/29 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
运动会表扬稿大全
2014/01/16 职场文书
五年级语文教学反思
2014/01/30 职场文书
决心书范文
2014/03/11 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
优秀求职信
2014/05/29 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
比较几种Redis集群方案
2021/06/21 Redis