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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
简单谈谈axios中的get,post方法
2017/06/25 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python 获取et和excel的版本号
2009/04/09 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python 将pdf转成图片的方法
2018/04/23 Python
详解Python中的分支和循环结构
2020/02/11 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
建筑专业自我鉴定
2013/10/22 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
美术专业自荐信
2014/07/07 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
天气温馨提示语
2015/07/14 职场文书
Django如何与Ajax交互
2021/04/29 Python
Go语言并发编程 sync.Once
2021/10/16 Golang
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL