演示地址：http://itxiaoming.sinaapp.com/demo05/demo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo01</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="main"> <div class="menu"> <div class="menu_b back1"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back2"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back3"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back4"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back5"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back6"></div> <span>测试</span> </div> </div> </body> </html>
$(document).ready(function(){
$(".menu").mouseover(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往右移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);
div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300);
//显示字体，往左移动20px
span.animate({opacity:'1',left:'0px'},300);
span.css({color:'#FFF'});
});
$(".menu").mouseout(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往左移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);
div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300);
//显示字体，往右移动20px
span.animate({opacity:'1',left:'0px'},300);
span.css({color:'#777'});
});
});
动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。
/* demo01 css */
#main{
background: #EEE;
display: inline-block;
padding: 10px;
}
.menu{position: relative;
width: 100px;
height: 40px;
margin: 10px auto;
}
.menu_b{
position: absolute;
width: 0px;
height: 0px;
background: red;
z-index: 1px;
top: 50%;
left: 50%;
}
.menu span{
position: inherit;
display: block;
text-align: center;
line-height: 40px;
z-index: 3px;
font-size: 14px;
font-family: "Microsoft Yahei";
color: #777;
cursor: pointer;
}
.back1{
background: #FF0000;
}
.back2{
background: #921AFF;
}
.back3{
background: #00CACA;
}
.back4{
background: #00DB00;
}
.back5{
background: #FF5809;
}
.back6{
background: #E1E100;
}
相关推荐
从提供的文件内容中，我们可以提炼出以下知识点： ### 知识点一：jQuery基础知识 jQuery是一个快速、小巧、功能丰富的JavaScript库。...希望这些知识点能够帮助到需要了解jQuery仿FLASH导航栏特效实现的读者。
jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换效果(仿Vancl效果) jQuery图片AnimatedPortfolioGallery jQuery图片AnimatedTextIconMenu jQuery图片BubblerifficImageGallery jQuery图片...
总结来说，"jQuery上下翻滚效果导航菜单(仿Flash)"是一个使用jQuery和CSS创建的动态网页元素，它模仿了Flash的滚动效果，提供了一种吸引用户的导航方式。通过JavaScript的事件处理和动画功能，结合CSS的样式和布局...
非常漂亮的jquery前端案例源代码（包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动）100个合集： ...jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换效果(仿Vancl效果
7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片...
【jQuery html5响应式顶部导航3D翻转特效】是一种结合了jQuery库和HTML5技术的前端开发实践，用于创建动态、吸引人的网页导航栏。这个特效的核心在于它能够实现3D翻转效果，当用户滚动页面或者点击特定元素时，导航...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
内容索引:脚本资源,jQuery,仿Flash,筋斗云,jQuery动画菜单 jQuery 实现卡通筋斗云动感菜单，仿Flash动画的效果，简要解析一下，用一张背景透明的图片实现了筋斗云人模样，然后用jquery控件这片云彩响应鼠标焦点并做...
9.jquery仿flash的图片幻灯片播放特效实例完整版 10.jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11.jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12.jQuery仿动感...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
在这个特定的案例中，jQuery被用来实现导航条的平滑滚动效果，模仿了传统的Flash效果，但相比Flash，jQuery代码具有更好的跨浏览器兼容性和更快的页面加载速度。 该代码的核心原理是利用jQuery的`.scrollLeft()`和`...
在首页设置这样的图片导航栏，可以帮助用户快速访问网站的不同部分，每个图片代表一个页面或内容分类，点击后直接跳转。 7. **苏宁易购商城产品图展示特效snimg.rar**： 这个插件可能借鉴了苏宁易购的图片展示...
在本资源中，"模版王"可能提供了一些预设的Flash模板，这些模板具有炫酷的视觉效果，可以被网站开发者用于快速构建具有吸引力的网页元素，如导航栏、广告轮播或动态展示区。 jQuery则是一种基于JavaScript的库，...
- 顶部导航栏与底部区域的设计采用100%宽度，使得整体更加协调统一。 - **视觉效果**： - 使用丰富的色彩搭配，使网页看起来更有活力。 - 合理运用图片、图标等元素，增强网页的视觉吸引力。 - **交互性**： - ...
掌握Flash意味着你可以创建自定义的按钮、导航栏、甚至是完整的网页应用程序，为用户提供丰富的用户体验。 接下来，我们关注动态HTML（DHTML）教程。DHTML是一种技术组合，包括HTML、CSS、JavaScript和DOM（文档...
### 知识点总结 #### 一、网页项目概述 ...通过以上分析可以看出，本项目不仅为学生提供了一个完整的前端网页设计案例，还涉及到了多种前端技术的应用，对于提高学生的动手能力和理解前端开发基础知识有着重要的意义。
这款菜单设计独特，初始状态下仅显示一个圆形按钮，当用户点击该按钮时，子菜单会以吸引人的弹性动画形式展开。这为网站的导航提供了一种交互性强且视觉效果丰富的解决方案。 首先，jQuery是一个轻量级的JavaScript...