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


Posted in Javascript onMay 17, 2010

先来看看效果:http://demo.3water.com/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菜单效果

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
js 数值项目的格式化函数代码
May 14 #Javascript
IE8 中使用加速器(Activities)
May 14 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
splice slice区别
2006/10/09 Javascript
greybox——不开新窗口看新的网页
2007/02/20 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python异常处理总结
2014/08/15 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
set在python里的含义和用法
2019/06/24 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
精伦电子Java笔试题
2013/01/16 面试题
学校门卫管理制度
2014/01/30 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
节约用水演讲稿
2014/05/21 职场文书
授权委托书格式范文
2014/08/02 职场文书
大学生村官个人总结
2015/02/15 职场文书
乔迁新居祝福语
2019/11/04 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL