jQuery实现非常实用漂亮的select下拉菜单选择效果


Posted in Javascript onNovember 06, 2015

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:

先来看如下运行效果截图:

jQuery实现非常实用漂亮的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>
<title>实用漂亮的select下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{font-size:12px;}
.select{width:150px;height:24px;line-height:24px;position:relative;text-align:center;cursor:pointer;background:url(images/selectbg.jpg) right 0px no-repeat;color:#fff;}
.option{line-height:24px;width:150px;position:absolute;top:24px;left:0px;display:none;background:#820014;}
ul{list-style:none;margin:0;padding:0;}
ul li{height:24px;background:#666px;text-align:center;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var selects=$("#select");
  var options=$("#option");
  var state=true;
  selects.click(function(){
   if(state){
   if(!($(this).is(":animated"))){
    options.slideDown();
   }else{
    options.css("display","none");
  }  
   state=false;
   }else{
   if(!($(this).is(":animated"))){
   options.slideUp();
   }else{
    $(this).stop(true,true);
    options.css("display","");
   }
   state=true;
   }
  });
 selects.hover(function(){
 $(this).css("background","url(images/selectbg2.jpg) right 0px no-repeat");
 },
 function(){
 $(this).css("background","url(images/selectbg.jpg) right 0px no-repeat");
 });
  $("li").hover(function(){
   $(this).css("background","#990000").css("color","#ff9900");
  },
  function(){
   $(this).css("background","#820014").css("color","#fff");
  });
  $("li").click(function(){
   $(this).css("background","#c00").css("color","#ffffff");
   options.css("display","none");
   selects.children("span").text($(this).attr("tip"));
   $(".valt").val($(this).attr("tip"));
   state=false;
  });
  options.click(function(){
   selects.click(function(){return false;});
  });
 })
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
您的选择是:<input type="text" class="valt" value="">
<div class="select" id="select"><span>请选择分类</span>
 <div class="option" id="option">
  <ul>
   <li tip="推荐课程">推荐课程</li>
   <li tip="资讯中心">资讯中心</li>
   <li tip="辅导专区">辅导专区</li>
   <li tip="公职考试">公职考试</li>
   <li tip="司法考试">司法考试</li>
   <li tip="报关、报检员">报关、报检员</li>
   <li tip="高考辅导">高考辅导</li>
   <li tip="招生简章">招生简章</li>
   <li tip="招生信息">招生信息</li>
   <li tip="学员专区">学员专区</li>
   <li tip="公计培训">公计培训</li>
   <li tip="名师团队">名师团队</li>
   <li tip="辅导教材">辅导教材</li>
  </ul>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
Prototype框架详解
Nov 25 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
基于vue的video播放器的实现示例
Feb 19 Vue.js
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
You might like
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
常用js脚本
2006/12/03 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python保留小数位的三种实现方法
2020/01/07 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
元宵晚会主持词
2014/03/25 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
紫日观后感
2015/06/05 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python