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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
js转html实体的方法
Sep 27 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue实例的选项总结
Jun 09 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自动生成月历代码
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
化学教师自荐信范文
2013/12/28 职场文书
给护士表扬信
2014/01/19 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
淘宝好评语句大全
2014/12/31 职场文书
员工年终考核评语
2014/12/31 职场文书
学习经验交流会策划书
2015/11/02 职场文书