jQuery+CSS3实现动感跳动菜单

Web网络开发 13/9/2 3.5k 0




在线演示           本地下载
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

相关帖子
admin
0 / 1.1k
wildfirefans
2 / 2.4k
admin
QQ拼音输入法Mac V2.8
admin最后由fuxjian01回复于 15/8/27
1 / 2.0k
花样年华
0 / 2.2k
MemX
求助。没EFI选项的主板如何Clover引导
MemX最后由vaughndelta回复于 14/11/9
5 / 4.4k
admin
HD6950显卡驱动 For OS X 10.8.2
admin最后由admin回复于 14/5/25
0 / 2.8k
fan911
CLOVER 如何修复引导WIN7
fan911最后由308951870回复于 15/2/15
5 / 6.4k
admin
0 / 4.0k
MemacX
2 / 6.7k
请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
您需要登录后才可以回帖 登录 | 注册
本版积分规则