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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
javascript new一个对象的实质
Jan 07 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
Windows下的PHP5.0详解
2006/11/18 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python如何将图片转换为字符图片
2020/08/19 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python构建基础的爬虫教学
2018/12/23 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
实例详解Python装饰器与闭包
2019/07/29 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
查摆问题自我剖析材料
2014/08/18 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
思品教学工作总结
2015/08/10 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL