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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
jQuery 1.0.2
Oct 11 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Python如何读写CSV文件
2020/08/13 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
培训班主持词
2014/03/28 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
租房协议书范例
2014/10/14 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
大学生求职自荐信
2015/03/24 职场文书
学生会工作感言
2015/08/07 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB