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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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中使用TCPDF生成PDF文档实例
2014/07/01 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php json转换相关知识(小结)
2018/12/21 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python字符编码判断方法分析
2016/07/01 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
tensorflow获取变量维度信息
2018/03/10 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
jupyter实现重新加载模块
2020/04/16 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
自我评价是什么
2014/01/04 职场文书
安全检查验收制度
2014/01/12 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
小学生校园广播稿
2014/09/28 职场文书
征求意见函
2015/06/05 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android