jquery实现select下拉框美化特效代码分享


Posted in Javascript onAugust 18, 2015

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码。
 为大家分享的jquery实现select下拉框美化特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />

</head>
<body>
<div class="searchbox">
 <div class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#aaa'}" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#333'}" value="请输入关键字" />
 </label>
 <div class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">设计欣赏</option>
 <option value="3">桌面壁纸</option>
 <option value="4">设计教程</option>
 </select>
 </div>
 <label>
 <button type="submit">快给我搜一下</button>
 </label>
 </fieldset>
 </form>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/selectbox.js"></script>
 <script type="text/javascript"> $(document).ready(function() {$('#mySle').selectbox();});</script>
 </div>
 
 
 
</div>
</body>
</html>

效果演示 源码下载

运行效果图:

jquery实现select下拉框美化特效代码分享

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是为大家分享的jquery实现select下拉框美化特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
You might like
php常用文件操作函数汇总
2014/11/22 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
js实现随机8位验证码
2020/07/24 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
学Python 3的理由和必要性
2019/11/19 Python
python中return的返回和执行实例
2019/12/24 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python如何进行矩阵运算
2020/06/05 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
传播学毕业生求职信
2013/10/11 职场文书
五一家具促销方案
2014/01/10 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
大学生求职信
2014/06/17 职场文书
领导班子整改措施
2014/10/24 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
微信早安问候语
2015/11/10 职场文书
2016新年晚会开场白
2015/12/03 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js