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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Bootstrap布局方式详解
May 27 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
js实现图片跟随鼠标移动效果
Oct 16 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
document.getElementById介绍
2011/09/13 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python通过future处理并发问题
2017/10/17 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python 下载及安装详细步骤
2019/11/04 Python
python opencv肤色检测的实现示例
2020/12/21 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
公司活动策划方案
2014/01/13 职场文书
中年人生感言
2014/02/04 职场文书
社区志愿者活动方案
2014/08/18 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
公司庆典主持词
2015/07/04 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL