jquery实现美观的导航菜单鼠标提示特效代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下:

这是一个奇妙的导航菜单鼠标提示特效,俗称“链接提示”,鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面。

先来看看运行效果截图:

jquery实现美观的导航菜单鼠标提示特效代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>链接提示特效</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".menu a").hover(function() {
  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
 }, function() {
  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
 });
});
</script>
<style type="text/css"> 
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
 margin: 100px 0 0;
 padding: 0;
 list-style: none;
}
.menu li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
.menu a {
 padding: 14px 10px;
 display: block;
 color: #000000;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(images/button.gif) no-repeat center center;
}
.menu li em {
 background: url(images/hover.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 font-style: normal;
 z-index: 2;
 display: none;
}
</style>
</head>
<body>
<ul class="menu">
 <li>
  <a href="http://www.baidu.com">Web Designer Wall</a>  
  <em>A wall of design ideas, web trends, and tutorials</em>
 </li>
 <li>
  <a href="#">Best Web Gallery</a>
  <em>Featuring the best CSS and Flash web sites</em>
 </li>
 <li>
  <a href="#">N.Design Studio</a>
  <em>Blog and design portfolio of WDW designer, Nick La</em>
 </li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
jQuery中extend函数详解
Jul 13 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
浅析vue数据绑定
Jan 17 Javascript
BootStrap的两种模态框方式
May 10 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
javascript日期处理函数,性能优化批处理
Sep 06 #Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 #Javascript
基于jquery实现的树形菜单效果代码
Sep 06 #Javascript
jQuery.extend 函数及用法详细
Sep 06 #Javascript
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js图片处理示例代码
2014/05/12 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
个人四风问题整改措施
2014/10/24 职场文书
英文自荐信范文
2015/03/25 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android