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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
vue  自定义组件实现通讯录功能
Sep 30 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 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 获取远程文件内容的函数代码
2010/03/24 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP递归算法的简单实例
2019/02/28 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
用Python解数独的方法示例
2019/10/24 Python
Python requests模块session代码实例
2020/04/14 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
记账会计岗位职责
2014/06/16 职场文书
2015年检验科工作总结
2015/04/27 职场文书
军训决心书范文
2015/09/22 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Mysql 用户权限管理实现
2021/05/25 MySQL