Jquery 超炫的导航效果

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量93 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/dingxiaowei/archive/2012/09/22/3058800.html
版权

<!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>

转载于:https://www.cnblogs.com/dingxiaowei/archive/2012/09/22/3058800.html

weixin_30699831
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery炫酷国家地图城市资源数据流转动态统计特效代码.rar
09-25
数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多
7款风格新颖的jQuery / CSS3菜单导航
caobihole
04-23 214
一款优秀的菜单对网站而言是非常重要的，它不仅可以让用户方便地找到想要的信息，而且更让人有一种特殊的用户体验。下面给大家分享7款风格新颖的jQuery/CSS3菜单导航，希望大家会喜欢。 1、CSS3立体飘带状菜单 CSS3立体飘带状菜单，该菜单鼠标滑过时，菜单项向上立体凸起，结合黑色的木质背景，整个菜单显得非常立体生动。 在线演示 /源码下载 2、CSS3个人资料导航菜单 该菜单是用...
CSS中background:url(图片) 不能显示的问题
weixin_34112181的博客
05-06 4692
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery 酷炫导航插件_10个最具创意的jQuery导航插件
cuketao5066的博客
08-04 522
jquery 酷炫导航插件10 most creative jQuery plugins for navigation This is collection of most attractive jQuery plugins for navigation (menu). This is various plugins including context menus, floating, dropd...
Jquery、css制作炫酷导航栏
午-夜
08-14 1540
直接看效果图 代码实现 #nav{list-style-type: none;margin: 50px auto 0;width: 950px;height: 38px;color: #333; font-size: 14px;padding: 0;overflow: hidden;} #nav li{width: 104p
jquery模拟flash导航效果
06-05
很像flash设计的导航效果，其实是jquery模拟
jQuery动画垂直折叠导航效果
06-05
jQuery动画垂直折叠导航效果
jQuery实现导航回弹效果
10-20
本文主要介绍了jQuery实现导航回弹效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
jQuery导航效果特效代码
03-20
jQuery导航效果是一款导航文字上下滑动的效果。
jquery实现吸顶导航效果
10-15
主要为大家详细介绍了jquery实现吸顶导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
超炫个人网站导航特效~
12-29
超炫个人网站导航特效
jquery超炫的登录界面
08-24
一款超炫的登录界面，带动画效果
jquery 酷炫导航插件_楼梯导航（一个jQuery插件？）
CSS 初学者指南
07-09 167
前几天，我一时兴起，以为自己会想到一个导航的想法。 仅仅是视觉效果，使悬停的（或活动的）导航项目在降下前后成为最高的“楼梯”和其他项目。 这很简单，但是却不是您经常看到的东西。 可能有一个主要原因：您不能在CSS中选择“上一个”元素。 观看演示 您可以在CSS中选择“下一个”元素。 您将使用常规的同级组合器来获取所有下一个元素，或者使用相邻的同级组合器来获取下一个元素（可以链接）。 ...
【html】绚丽的HTML5地图分布动画DEMO演示
cubi56517的博客
03-28 716
<html lang="en"> <head> <meta charset="utf-8"> ...
echarts图表插件炫光的分布地图动画特效
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-26 2876
echarts图表插件炫光的分布地图动画特效 作品介绍 1.网页作品简介方面 ：地图html5图表html5动画 2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用） 文章目录echarts图表插件炫光的分布地图动画特效作品介绍一、作品演示二、代码目录三、代码实现四、web前端入门到高级(视频+源码+
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 363
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 367
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 299
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
jQuery滑动导航菜单
05-30
可以通过以下代码实现基本的jQuery滑动导航菜单： HTML代码： ```html <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值