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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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正则校验用户名介绍
2008/07/19 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
利用python计算时间差(返回天数)
2019/09/07 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
灰雀教学反思
2014/04/28 职场文书
单位绩效考核方案
2014/05/11 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年科协工作总结
2015/05/19 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js
MySQL系列之十一 日志记录
2021/07/02 MySQL
Redis RDB技术底层原理详解
2021/09/04 Redis
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS