jQuery下拉友情链接美化效果代码分享


Posted in Javascript onAugust 26, 2015

本文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQuery实现的下拉美化特效,分享给大家供大家参考。具体如下:
运行效果图:                                                   -------------------查看效果-------------------

jQuery下拉友情链接美化效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery下拉友情链接美化效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下拉友情链接美化代码</title>
<style>
BODY {
 FONT: 12px "宋体", "微软雅黑", Arial, Tahoma, Helvetica, STHeiti, "Hiragino Sans GB";
 COLOR: #363636
}
DIV {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
SELECT {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
SELECT {
 BOX-SIZING: content-box;
 BORDER-BOTTOM: #ddd 1px solid;
 BORDER-LEFT: #ddd 1px solid;
 PADDING-BOTTOM: 1px;
 LINE-HEIGHT: 20px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP: #ddd 1px solid;
 BORDER-RIGHT: #ddd 1px solid;
 PADDING-TOP: 1px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
}
OPTION {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
.footer-select {
 POSITION: absolute;
 RIGHT: 620px;
 TOP: 19px
}
.footer_sel {
 BORDER-BOTTOM: #d6d6d6 1px solid;
 BORDER-LEFT: #d6d6d6 1px solid;
 LINE-HEIGHT: 22px;
 WIDTH: 190px;
 HEIGHT: 22px;
 COLOR: #afafaf;
 BORDER-TOP: #d6d6d6 1px solid;
 BORDER-RIGHT: #d6d6d6 1px solid
}

</style>
<script type=text/javascript src="js/jquery-1.4.1.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class=footer-select>
 <select id=FriendLink class=footer_sel>
 <option selected value="">友情链接</option>
 <option value="https://3water.com/">三水点靠木</option>
 <option value="https://3water.com/">网页制作</OPTION>
 <option value="https://3water.com/">脚本专栏</option>
 <option value="https://3water.com/">脚本下载</option>
 <option value="https://3water.com/">网络编程</option>
 <option value="https://3water.com/">电子书籍</option>
 <option value="https://3water.com/">数据库</option>
 </select>
</div>
<script type=text/javascript src="js/newbase.js"></script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:250px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>

以上就是为大家分享的jQuery下拉友情链接美化效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 #Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
You might like
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
小学开学寄语
2014/01/19 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
带薪年假请假条
2014/02/04 职场文书
五年级科学教学反思
2014/02/05 职场文书
给校长的建议书300字
2014/05/16 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
党员身份证明材料
2015/06/19 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
演讲开头怎么书写?
2019/08/06 职场文书