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 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
react-router实现按需加载
May 09 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
vue 优化CDN加速的方法示例
Sep 19 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python对列表的操作知识点详解
2019/08/20 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python生成词云的实现代码
2020/01/14 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
119消防日活动总结
2014/08/29 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL