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


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



相关阅读:
ASP.NET中利用Segments取得URL的文件名的一种方法分享
使用Axis开发Web Service程序
网页缓冲效果特效代码
asp.net下用url重写URLReWriter实现任意二级域名的方法
HTML表格标记教程(5):亮边框色属性BORDERCOLORLIGHT
来自PHP.NET的入门教程
JS延迟加载(setTimeout) JS最后加载
MySQL数据导入导出方法与工具(2)
如何用Windows 7开启或关闭屏幕键盘
CSS实现 Firefox 和 IE 都支持的半透明效果
CSS Border属性制作小三角
CSS教程:制作对用户友好的站内搜索表单
JavaScript 常用函数库详解
Win2008虚拟化实战之启用Hyper-V功能
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 学生校外实习安全告知书 思念的百合花开 那一抹水漾的绿 小满节气诗歌 猫生宝宝作文300字 祈祷吧!高考了! 个人借款协议 医生悼词 公安局分局保持共产党员先进性教育活动总结 被埋藏在记忆深处的感觉500字 小学六年级作文400字:我为班集增光彩 《水乡歌》 情景创设 品味感悟 一朵花的温暖 —— 献给春天 名楼月满花事了 永葆先进执政为民 你若不笑,我不罢休 爱的欣喜 我想100字作文 有妈妈的感觉真好 区卫生监督所2006年工作总结 我用记忆来祭奠曾经的爱情 在全国安全生产工作会议上的总结讲话工作总结(4) 接近大自然作文400字 “真诚”话题作文3篇优秀范文 把握现在、努力抓住今天、活在当下 落梅 相遇天堂人 财务软件的测试与评价二 记一次课间活动 员工事假请假条范本 中外名著导读拓展课心得体会 古朴的欢喜 单身是茫然,恋爱也彷徨 七彩斑斓话果实——石皓天作文400字 当爱不再出现 小猪的鼻子生气了150字 小学三年级作文300字:又小雨 食盐的一百多个妙用,真的好神奇! 清明节扫烈士墓演讲稿 电力安全生产心得 爱若有时,定守你一世平静 经典语录:你和那些好东西,总有一天会相遇 给老师写一封信作文500字 永不磨灭的“友谊桥” 【精品】卫校毕业自我鉴定 生态瓶 美丽的荷花作文300字 局长在水务局信息宣传工作上的讲话 初三三好学生事迹材料 远离侥幸作文1300字

Copyright © 2016 phpStudy |