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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 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
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript globalStorage类代码
2009/06/04 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
详解在Python和IPython中使用Docker
2015/04/28 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
乡镇平安建设汇报材料
2014/08/25 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书