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 相关文章推荐
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
vue实现动态按钮功能
May 13 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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 分页原理详解
2009/08/21 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js函数调用的方式
2014/05/06 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python中split方法用法分析
2015/04/17 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python修改MP3文件的方法
2015/06/15 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
sort命令的作用和用法
2012/11/04 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
教师年度考核评语
2014/04/28 职场文书
企业活动策划方案
2014/06/02 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
关于远足的感想
2015/08/10 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫