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 Eval 函数使用
Mar 23 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
javascript解析json数据的3种方式
May 08 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
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把session写入数据库示例
2014/02/26 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
python文件的md5加密方法
2016/04/06 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Java面试题汇总
2015/12/06 面试题
公司领导推荐信
2013/11/12 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
消防安全标语
2014/06/07 职场文书
公司离职证明样本
2014/09/13 职场文书
2019年入党思想汇报
2019/03/25 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
PyTorch的Debug指南
2021/05/07 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python