Jquery 超炫的导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>JS仿flash效果横向和竖向导航菜单 - 小未-http://write.blog.csdn.net/postlist</title>
 <script type='text/javascript' src='roller.js' ></script>
 
 <style>
 body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 font-size: 80%;
 font-weight: bold;
 } 
 
 ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

/* =-=-=-=-=-=-=-[Nav 1]-=-=-=-=-=-=-=- */
 #nav_container{
 width:145px;
 margin-left:30px;
 margin-top:30px;
 float:left;
 }
 #nav_container li{
 padding:0px;
 margin-bottom:1px;
 }
 #nav_container{
 margin-left:30px;
 }
 #nav_container a:link,#nav_container a:visited,#nav_container a:active{
 width:145px;
 background: url(images/bg3.gif)  -200px 0px repeat-x;
 height:30px;
 padding-top:5px;
 padding-left:50px;
 border-bottom:1px solid #777;
 display:block;
 text-decoration:none;
 text-align:left;
 font-weight:bold;
 color:#333;
 }
 #nav_container a:hover{
 color:#000;
 background: url(images/bg3.gif)  0px 0px repeat-x;
 }
 
 

/* =-=-=-=-=-=-=-[Nav 2]-=-=-=-=-=-=-=- */ 
 #nav_container2{
 width:145px;
 margin-left:60px;
 margin-top:30px;
 float:left;
 }
 #nav_container2 li{
 padding:0px;
 margin-bottom:1px;
 }
 #nav_container2 a:link,#nav_container2 a:visited,#nav_container2 a:active{
 width:145px;
 background: url(images/bg2.gif) 0px 0px repeat-x;
 font-weight:bold;
 height:30px;
 padding-top:5px;
 padding-left:50px;
 display:block;
 text-align:left;
 border-bottom:1px solid #777;
 text-decoration:none;
 color:#333;
 }
 #nav_container2 a:hover{
 color:#000;
 background: url(images/bg2.gif)  0px -45px repeat-x;
 }
 
 

/* =-=-=-=-=-=-=-[Nav 3]-=-=-=-=-=-=-=- */ 
 #nav_container3{
 width:145px;
 margin-left:60px;
 margin-top:30px;
 float:left;
 }
 #nav_container3 li{
 padding:0px;
 margin-bottom:1px;
 }
 #nav_container3 a:link,#nav_container3 a:visited,#nav_container3 a:active{
 width:145px;
 background: url(images/bg4.gif) -200px 0px repeat-x;
 font-weight:bold;
 height:30px;
 padding-top:5px;
 padding-left:50px;
 display:block;
 text-align:left;
 border-bottom:1px solid #777;
 text-decoration:none;
 color:#333;
 }
 #nav_container3 a:hover{
 color:#000;
 background: url(images/bg4.gif)  -24px 0px repeat-x;
 }
  

/* =-=-=-=-=-=-=-[Nav 4]-=-=-=-=-=-=-=- */ 
 #nav_container4{
 width:788px;
 margin-left:60px;
 margin-top:30px;
 float:left;
 }
 #nav_container4 li{
 padding:0px;
 margin-bottom:1px;
 float:left;
 border-right:1px solid #ccc;
 border-left: 1px solid #888;
 }
 #nav_container4 a:link,#nav_container4 a:visited,#nav_container4 a:active{
 width:145px;
 background: url(images/bg5.gif) 0px -70px repeat-x;
 font-weight:bold;
 height:30px;
 padding-top:5px;
 display:block;
 text-align:center;
 border-bottom:1px solid #777;
 text-decoration:none;
 color:#333;
 }
 #nav_container4 a:hover{
 color:#000;
 background: url(images/bg5.gif)  0px 0px repeat-x;
 }
  

/* =-=-=-=-=-=-=-[Nav 5]-=-=-=-=-=-=-=- */
 #nav_container5{
 width:145px;
 margin-left:30px;
 margin-top:30px;
 float:left;
 }
 #nav_container5 li{
 padding:0px;
 margin-bottom:1px;
 }
 #nav_container5{
 margin-left:30px;
 }
 #nav_container5 a:link,#nav_container5 a:visited,#nav_container5 a:active{
 width:145px;
 height:30px;
 padding-top:5px;
 padding-left:50px;
 border-bottom:1px solid #777;
 display:block;
 text-decoration:none;
 text-align:left;
 font-weight:bold;
 color:#333;
 text-indent:-300px;
 overflow:hidden;
 }
 #nav_container5 a:hover{
 color:#000;
 }
 
 #nav_home{
 background-image: url(images/bg7.gif);
 background-position: 0px 0px;
 }
 #nav_home:hover{
 background-image: url(images/bg7.gif);
 background-position: 0px -45px;
 }
  
 
 #nav_about{
 background-image: url(images/bg8.gif);
 background-position: 0px 0px;
 }
 #nav_about:hover{
 background-image: url(images/bg8.gif);
 background-position: 0px -45px;
 }
  
 
 #nav_port{
 background-image: url(images/bg9.gif);
 background-position: 0px 0px;
 }
 #nav_port:hover{
 background-image: url(images/bg9.gif);
 background-position: 0px -45px;
 }
  
 
 
 #nav_con{
 background-image: url(images/bg10.gif);
 background-position: 0px 0px;
 }
 #nav_con:hover{
 background-image: url(images/bg10.gif);
 background-position: 0px -45px;
 }
  

 </style>
 </head>
 <body>
 <div id="nav_container">
  <ul>
    <li>    
     <a href="#">Home</a>
    </li>
    <li>    
     <a href="#">About</a>
    </li>
    <li>    
     <a href="#">Portfolio</a>
    </li>
    <li>    
     <a href="#">Contact</a>
    </li>
   </ul>
 </div>
  
  

  <div id="nav_container2">
   <ul>
    <li>    
     <a href="#">Home</a>
    </li>
    <li>    
     <a href="#">About</a>
    </li>
    <li>    
     <a href="#">Portfolio</a>
    </li>
    <li>    
     <a href="#">Contact</a>
    </li>
   </ul>
  </div>
  
  
   

  <div id="nav_container3">
   <ul>
    <li>    
     <a href="#">Home</a>
    </li>
    <li>    
     <a href="#">About</a>
    </li>
    <li>    
     <a href="#">Portfolio</a>
    </li>
    <li>    
     <a href="#">Contact</a>
    </li>
   </ul>
  </div>
   <br/><br/>
<div style="clear:both;width:100%;"></div>
  <div id="nav_container4">
   <ul>
    <li>    
     <a href="#">Home</a>
    </li>
    <li>    
     <a href="#">About</a>
    </li>
    <li>    
     <a href="#">Portfolio</a>
    </li>
    <li>    
     <a href="#">Contact</a>
    </li>
   </ul>
  </div>
<br/><br/>
<div style="clear:both;width:100%;"></div>
  <div id="nav_container5">
   <ul>
    <li>    
     <a id="nav_home" href="#">Home</a>
    </li>
    <li>    
     <a id="nav_about" href="#">About</a>
    </li>
    <li>    
     <a id="nav_port" href="#">Portfolio</a>
    </li>
    <li>    
     <a id="nav_con" href="#">Contact</a>
    </li>
   </ul>
  </div>
  
<script>

roller.init('nav_container','h',-200,0,100,20);
roller.init('nav_container2','v',0,-45,100,20);
roller.init('nav_container3','h',-200,-24,100,20);
roller.init('nav_container4','v',-66,0,250,20);
roller.init('nav_container5','v',0,-45,80,15);

</script>

</body>
</html>

时间： 2024-09-19 20:31:51

Jquery 超炫的导航效果的相关文章

一款基jquery超炫的动画导航菜单可响应单击事件_jquery

今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

jQuery实现带滚动导航效果的全屏滚动相册实例

  本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

jquery超简单实现手风琴效果的方法_jquery

本文实例讲述了jquery超简单实现手风琴效果的方法.分享给大家供大家参考.核心代码如下: $("#accordion .expanded").hide(); $("a.opening").click(function(){ $(this).next().slideToggle('fast', function(){ $(this).prev("a.opening").toggleClass("active"); }); re

jQuery实现带滚动导航效果的全屏滚动相册实例_jquery

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

jQuery实现下滑菜单导航效果代码_jquery

本文实例讲述了jQuery实现下滑菜单导航效果代码.分享给大家供大家参考.具体如下: 这里演示jquery向下滑的导航菜单代码,黄色风格下滑菜单,可作为网站的主导航菜单,二级菜单向下滑出,兼容性也是很不错的,本菜单来源自网络,丢失原作者署名信息,请原作者看到后与我们联系署名. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html

photoshop设计超炫光斑文字效果制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计超炫光斑文字效果的制作教程. 教程分享: 一.画出草图 1. 新建图层 W:42.5cm, H:59.4cm,300 dpi,CMYK. 用画笔很快的画一个心形出来.   2. 画出文字草图,考虑到只是一个草图,如果你觉得在纸上画更自在,你可以画好后再扫描到电脑上哦~   3. 这一部很简单,用钢笔工具将你画的字 勾出来~ (原教程要在AI里执行,小编改编了一下~反正能做出来,就是王道,哇卡卡卡)   二.制作更多的线条 1. 在路径

Illustrator制作超炫的发光条效果的教程

给各位Illustrator软件的使用者们来详细的解析分享一下制作超炫的发光条效果的教程. 教程分享: 步骤一.新建文档,用矩形工具画一个矩形,填充黑色,无边框,然后使用网络工具.在矩形上方建立颜色节点进行填充,如图所示:   步骤二.用同样的方法,节点填充几个不同的颜色节点,得到如图所示:   步骤三.画一个矩形填充白色,选中并按住alt键的同时拖动,复制另一个矩形再在保持选中的状态下,放大矩形的宽度,并更改透明度为20%,然后选中这二个对矩形,打开对齐面板,选择居中对齐,得到如图所示:  

CSS3使用Animate.css制作超炫的动画效果

Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转.滑动.旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单. 首先引入animate css文件. <link rel="stylesheet" href="animate.min.css"> 然后给指定的元素加上指定的动画class样式名. <div class="animated bounce

PowerPoint中制作超炫旋转文字效果

  步骤一: 打开PowerPoint新建一个演示文稿 步骤二: 插入艺术字,内容输入自己想要的文字"第九软件网",如图 点击插入的艺术字,在菜单栏选择"艺术字形状"这里我们选择细环形,然后,调整文字的间距,如图 步骤三: 右键选择"设置对象格式",设置其颜色,如图 步骤四: 执行[插入--形状--十六角星],然后设置对象格式,设置颜色,如图 步骤五: 分别给文字和十六角星形状添加"陀螺旋"动画效果,其中十六角星动画效果设置如