jQuery+CSS3实现动感跳动菜单

MemacX

在线演示           本地下载

CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。以前做圆角都是用图片拼接而成，如果你还是停留在那个阶段，我只能说你太落后了，现在用CSS3打造的圆角有这么几个特点：提高网页性能。，网页的载入速度将变快，因为你不用加载多余图片自然就快了，增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况；

下面是我开发当中总结的几种CSS3圆角技术，这些是最基本的代码，以后再遇到类似的问题你可以使用它来实现

1. css3 最简单的边框圆角

1. <div id="vnav">
   
2. <ul>
   
3. <li><h1>Home</h1><p>Home page</p></li>
   
4. <li><h1>About Us</h1><p>Know About our company</p></li>
   
5. <li><h1>Portfolio</h1><p>Check our Portfolio</p></li>
   
6. <li><h1>Contact Us</h1><p>Have a question?</p></li>
   
7. </ul>
   
8. </div>

复制代码

jQuery代码：

1. $(document).ready(function(){
   
2. //When Mouse rolls over li
   
3. $("li").mouseover(function(){
   
4. $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
   
5. });
   
6. //When Mouse cursor removed from li
   
7. $("li").mouseout(function(){
   
8. $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
   
9. });
   
10. });

复制代码

出自：http://www.aspxcs.net/index.php?m=content&c=index&a=show&catid=7&id=180