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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
js 学习笔记(三)
Dec 29 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
学习使用PHP数组
2006/10/09 PHP
PHP动态图像的创建
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
python读取Android permission文件
2013/11/01 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python实现登录接口的示例代码
2017/07/21 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python 加密与解密小结
2018/12/06 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python 对xml解析的示例
2021/02/27 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
社区志愿者活动方案
2014/08/18 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
入党后的感想
2015/08/10 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Java spring单点登录系统
2021/09/04 Java/Android
Redis+AOP+自定义注解实现限流
2022/06/28 Redis