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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
编辑浪子版表单验证类
May 12 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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扩展CURL的用法详解
2014/06/20 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python Queue模块详解
2014/11/30 Python
python删除特定文件的方法
2015/07/30 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python交互环境下实现输入代码
2018/06/22 Python
TensorFlow实现Logistic回归
2018/09/07 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
区三好学生主要事迹
2014/01/30 职场文书
小学运动会班级口号
2014/06/09 职场文书
会计系毕业求职信
2014/08/07 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
活动宣传稿范文
2015/07/23 职场文书
2016年教代会开幕词
2016/03/04 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android