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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
浅谈js的异步执行
Oct 18 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JS变量提升及函数提升实例解析
Sep 03 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个人网站架设连环讲(三)
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue 左滑删除功能的示例代码
2019/01/28 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
乡镇创先争优活动总结
2014/08/28 职场文书
2014年材料员工作总结
2014/11/19 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
琅琊山导游词
2015/02/05 职场文书
求职信如何撰写?
2019/05/22 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
go web 预防跨站脚本的实现方式
2021/06/11 Golang
python中redis包操作数据库的教程
2022/04/19 Python