脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery flash菜单

jQuery实现的类flash菜单效果代码

 更新时间：2010年05月17日 22:16:27   作者：  
这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。
先来看看效果：http://demo.jb51.net/js/jquery_flash/demo.htm

因为下面的menu和上面的logo的实现原理一样，为了简化起见，我们这里只拿logo部分的代码来说明一下原理：

HTML代码：
复制代码 代码如下:

<a id="logotype" href=""><span>Logo Type</span></a>

CSS代码：
复制代码 代码如下:

a#logotype{ background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; } a#logotype span{display:none} a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; } a#logotype{
background: url(logotype.jpg) no-repeat top left;
display: block;
position: relative;
height: 70px;
width: 119px;
}
a#logotype span{display:none}
a#logotype .hover {
background: url(logotype.jpg) no-repeat bottom left;
display: block;
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 119px;
}


这里有一个.hover的class，从html中并没有发现，不要着急，这个在后面的js中会用到。

JS代码：
复制代码 代码如下:

$(function() { var fadeSpeed = ($.browser.safari ? 600 : 450); $('#logotype').append('<span class="hover"></span>'); $('.hover').css('opacity', 0); $('.hover').parent().hover(function() { $('.hover', this).stop().animate({ 'opacity': 1 }, fadeSpeed) }, function() { $('.hover', this).stop().animate({ 'opacity': 0 }, fadeSpeed) }); }); $(function() {
var fadeSpeed = ($.browser.safari ? 600 : 450);
$('#logotype').append('<span class="hover"></span>');
$('.hover').css('opacity', 0);
$('.hover').parent().hover(function() {
$('.hover', this).stop().animate({
'opacity': 1
},
fadeSpeed)
},
function() {
$('.hover', this).stop().animate({
'opacity': 0
},
fadeSpeed)
});
});


这段JS很清楚的描述了该效果的实现原理：首先在链接中创建一个class为hover的span（这个span是鼠标放到连接上时的现实效果），并且将其透明度设置为0，然后当鼠标移到连接上时，将该span的透明逐渐调整为1，这样上面的span就会覆盖a的默认效果，这样就实现我们的动画效果。

基于jQuery实现的仿flash菜单效果
您可能感兴趣的文章:

相关文章

  • jquery的extend和fn.extend的使用说明

    jquery的extend和fn.extend的使用说明

    jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
    2011-01-01
  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    jQuery 网易相册鼠标移动显示隐藏效果实现代码

    显示隐藏效果的实现主要是jquery层选择器的应用：当鼠标移动经过照片就显示设为封面删除，移开后就隐藏，此效果在web开发中经常会用到，感兴趣的朋友可以参考下哈
    2013-03-03
  • jQuery中通过ajax的get()函数读取页面的方法

    jQuery中通过ajax的get()函数读取页面的方法

    这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下
    2016-02-02
  • jquery的each方法使用示例分享

    jquery的each方法使用示例分享

    each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理，jQuery和jQuery对象都实现了该方法，下面是使用方法
    2014-03-03
  • jQuery实现电梯导航模块

    jQuery实现电梯导航模块

    这篇文章主要为大家详细介绍了jQuery实现电梯导航模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jquery 学习之一 对象访问

    jquery 学习之一 对象访问

    jquery 学习之一 对象访问整理，学习jquery的朋友可以参考下。
    2010-11-11
  • Jquery 获取对象的几种方式介绍

    Jquery 获取对象的几种方式介绍

    本文为大家介绍下Jquery如何获取对象有哪几种方式，感兴趣的朋友可以参考下
    2014-01-01
  • 再次分享18个非常棒的jQuery表格插件

    再次分享18个非常棒的jQuery表格插件

    我们一般都是用HTML表格来显示结构化数据，如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据，增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件，有用到朋友可以参考一下。
    2011-04-04
  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    这篇文章主要介绍了jQuery实现侧边栏隐藏与显示的方法,结合实例形式较为详细的分析了jQuery基于事件响应与页面元素属性动态操作实现元素显示与隐藏功能的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 基于jquery实现的tab选项卡功能示例【附源码下载】

    基于jquery实现的tab选项卡功能示例【附源码下载】

    这篇文章主要介绍了基于jquery实现的tab选项卡功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,并附带源码下载,需要的朋友可以参考下
    2019-06-06

最新评论