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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
jQuery 技巧小结
Apr 02 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
js获取页面description的方法
May 21 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
剖析Angular Component的源码示例
Mar 23 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 静态页面中显示动态内容
2009/08/14 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
校园安全广播稿
2014/02/08 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
道德之星事迹材料
2014/05/03 职场文书
装修施工安全责任书
2014/07/24 职场文书
铅球加油稿100字
2014/09/26 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书