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 setTimeout和setInterval 的区别
Dec 08 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
中国第一家无线电行
2021/03/01 无线电
php图片上传存储源码并且可以预览
2011/08/26 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python是什么 Python的用处
2020/05/26 Python
Python控制台实现交互式环境执行
2020/06/09 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
实体的生命周期
2013/08/31 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
办公室个人总结
2015/02/28 职场文书