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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
Koa2微信公众号开发之消息管理
May 16 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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 文件上传类代码
2011/08/06 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
Python中__init__.py文件的作用详解
2016/09/18 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
中职生自荐信
2013/10/13 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
万年牢教学反思
2014/02/15 职场文书
元宵节主持词
2014/03/25 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2014年调度员工作总结
2014/11/19 职场文书
人事局接收函
2015/01/30 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL