以下是 jQuery iNav动画插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery iNav动画插件</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.inav-min.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/jquery.inav-packed.js"></script>
</head>
<body class="home page page-id-5 page-template-default">
<div id="head">
<div id="menu">
<div class="container">
<a id="logo" href="#">jQuery iNav 2.0</a>
<ul id="navigation" class="unstyled menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-16">
<a href="#">Home</a></li>
</ul>
</div>
</div>
<div class="container" id="inav-dock">
<div class="inav-showcase" id="inav">
<div class="inav-arrows">
<a href="#" class="inav-prev-item inav-arrow">
<!-- --></a><a href="#" class="inav-next-item inav-arrow">
<!-- --></a></div>
<div class="inav-menu">
</div>
<div class="inav-slides">
<ul>
<li><a href="#">
<img src="img/elephant.png" alt="" /></a></li>
<li><a href="#">
<img src="img/gorilla.png" alt="" /></a></li>
<li><a href="#">
<img src="img/home.png" alt="" /></a></li>
<li><a href="#">
<img src="img/ice-cream.png" alt="" /></a></li>
<li><a href="#">
<img src="img/lion.png" alt="" /></a></li>
<li><a href="#">
<img src="img/elephant.png" alt="" /></a></li>
<li><a href="#">
<img src="img/gorilla.png" alt="" /></a></li>
<li><a href="#">
<img src="img/home.png" alt="" /></a></li>
<li class="title">circus</li>
</ul>
<ul>
<li><a href="#">
<img src="img/cart.png" alt="" /></a></li>
<li><a href="#">
<img src="img/notebook_boy.png" alt="" /></a></li>
<li><a href="#">
<img src="img/notebook_girl.png" alt="" /></a></li>
<li><a href="#">
<img src="img/photo.png" alt="" /></a></li>
<li><a href="#">
<img src="img/piggybank.png" alt="" /></a></li>
<li><a href="#">
<img src="img/cart.png" alt="" /></a></li>
<li><a href="#">
<img src="img/notebook_boy.png" alt="" /></a></li>
<li><a href="#">
<img src="img/notebook_girl.png" alt="" /></a></li>
<li class="title">fliraneo</li>
</ul>
<ul>
<li><a href="#">
<img src="img/akg-k181-256x256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/MBP-256x256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/mk2-sl25-256x256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/nocturn-256x256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/profire-610-256x256.png" alt="" /></a></li>
<li class="title">gadgets</li>
</ul>
<ul>
<li><a href="#">
<img src="img/Agate256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Coin256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/FilesFolder256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Ingot256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Melted256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/PaperMoney256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Partnership256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Ring256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/StoneRing256.png" alt="" /></a></li>
<li><a href="#">
<img src="img/Treasure256.png" alt="" /></a></li>
<li class="title">jewelry</li>
</ul>
</div>
<!-- /slides --></div>
<!-- /inav-showcase --></div>
</div>
<div id="high">
<div class="container">
<h1>The best product showcasing <small>with iNav you can create simple
and amazing items navigation menu.</small></h1>
</div>
</div>
<div id="main">
<div class="container">
<div class="row">
<div id="wide" class="span7">
<div class="section">
<h3>iNav — jQuery plugin</h3>
<p>iNav it’s a jQuery plugin that let you create an amazing
animated Menu (even with multiple menus) or Items
Showcasing.
<strong>Inspired by Apple products navigation</strong>, iNav
can introduce in your website a very <strong>powerful
javascript navigation!</strong> In order to work properly,
iNav requires at least jQuery 1.4 or higher.</p>
</div>
<div class="section">
<h3>Features</h3>
<h5>2 in 1</h5>
<p>jQuery iNav it’s an animated menu items showcasing, but
it’s also a Carousel.</p>
<h5>Autoscroll</h5>
<p>You can set a interval and your carousel will auto-scroll
to show always all your items!</p>
<h5>Themes</h5>
<p>You can choose a theme from the starter kit or create
your own easily</p>
<h5>Autoscroll</h5>
<p>You can set a interval and your carousel will auto-scroll
to show always all your items!</p>
<h5>Infinity scrolling</h5>
<p>Available as an optional parameter, you can choose if
rewind the carousel when the latest item was reached.</p>
<h5>You have the control</h5>
<p>jQuery iNav have more than 20 options and 10 callbacks
that you can use to have the control of the plugin!</p>
<h5>Extremly configurable</h5>
<p>You can configure every class name used by jQuery iNav.</p>
</div>
</div>
<!-- /wide -->
<div id="side" class="span4 offset1">
<div class="widget">
<h3>Crossbrowser</h3>
<p>jQuery iNav include support for all major browser: IE7+,
Safari, Firefox, Chrome and Opera.</p>
</div>
<div class="widget">
<h3>Support</h3>
<p>Install jQuery iNav it’s simple, but if you need support
you can always email me, or use the Codecanyon product page.</p>
</div>
<div class="widget">
<h3>Themes</h3>
<p>Not familiar with CSS ?<br>
This is not a problem! From version 2.0 iNav include a set
of themes that you can use with your project just including
the CSS file!!!</p>
</div>
<div class="widget">
<h3>Changelog<small>latest version: 2.0 - 2012/05/23</small></h3>
<p>The version 2.0 it’s a major release, and include new
features, bug fixes and some improvements:</p>
<p>* Carousel autoslide ( with timer )<br>
* Easy setup<br>
* Lots of callbacks<br>
* Cleanup of code<br>
* Added support for iNav Themes<br>
* Infinity scrolling<br>
* Less code for initial setup<br>
* Public methods: hide arrows and pause auto-scroll</p>
</div>
</div>
<!-- /side --></div>
<!-- /row --></div>
<!-- /main-container --></div>
<script type="text/javascript" src="js/core.js"></script>
</body>
</html>
JS代码(core.js):
"use strict";
$( function(){
window.prettyPrint && prettyPrint();
var $nav = $( '#inav' ).inav({
autoCenterMenu:true,itemWidth:170,carouselAutoScroll:true}
);
$( '.inav-theme-demo' ).each( function(){
var width = $( this ).data( 'item-width' ),height = $( this ).data( 'item-height' );
$( this ).inav({
itemWidth:width,itemHeight:height}
);
}
);
}
);
CSS代码(jquery.inav-min.css):
.inav-showcase{position:relative;z-index:10}
.inav-showcase .inav-menu{margin-bottom:10px;height:20px}
.inav-showcase .inav-menu.auto-centered{position:absolute;z-index:10;top:-20px;left:50%}
.inav-showcase .inav-menu ul{margin:0;list-style:none}
.inav-showcase .inav-menu ul li{float:left;margin-left:10px}
.inav-showcase .inav-menu ul li:first-child{margin-left:0}
.inav-showcase .inav-menu ul li.current-menu a{font-weight:bold;color:#000}
.inav-showcase .inav-menu ul li a{outline:0}
.inav-showcase .inav-arrow{position:absolute;z-index:20;display:block;top:50%;width:30px;text-align:center}
.inav-showcase .inav-arrows a{outline:0;padding:3px;background-color:rgba(0,0,0,0.3)}
.inav-showcase .inav-arrows a.disabled{color:#666}
.inav-showcase .inav-arrows a.inav-prev-item{left:10px}
.inav-showcase .inav-arrows a.inav-next-item{right:10px}
.inav-showcase .inav-arrow:hover{background-color:rgba(0,0,0,0.6)}
.inav-showcase .inav-slides{position:relative;z-index:10;width:100%;overflow:hidden}
.inav-showcase .inav-slides ul{position:absolute;z-index:10;top:0;left:0;margin:0;padding:0;width:100%;min-width:100%;list-style:none;display:none;overflow:hidden}
.inav-showcase .inav-slides ul.active{display:block}
.inav-showcase .inav-slides ul.next{display:block;z-index:20}
.inav-showcase .inav-slides ul li{float:left;text-align:center}
.inav-showcase .inav-slides ul li.ready-to-dismiss{position:absolute;z-index:10;top:0;display:block;float:none}
.inav-showcase .inav-slides ul li.title{display:none}
.inav-showcase .inav-slides ul li.current-menu-item a{font-weight:bold;color:#000}
.inav-showcase .inav-slides ul li a{color:#7f7f7f;display:block;width:100%;height:100%;font-size:11px;text-decoration:none;font-size:13px;text-align:center}
.inav-showcase .inav-slides ul li a img{margin:0 auto 5px;display:block;border:0;max-width:100%}
.inav-showcase .inav-slides ul li a:hover{color:#000}
.inav-theme-ecommerce .inav-slides ul li a{border:1px solid #ccc;width:115px;margin:0 auto;height:198px;padding:5px;background-color:#f7f7f7}
.inav-theme-ecommerce .inav-slides ul li a:hover{box-shadow:0 -3px 3px #ccc;border-color:#b8b8b8}
.inav-theme-ecommerce .inav-slides ul li a span.title{display:block;font-size:12px;font-weight:bold;text-align:left;color:#666;margin-bottom:1px}
.inav-theme-ecommerce .inav-slides ul li a span.desc{display:block;font-size:11px;line-height:11px;color:#333;text-align:left}
.inav-theme-ecommerce .inav-menu{background-color:#f4eded;border:1px solid #ccc;height:25px}
.inav-theme-ecommerce .inav-menu ul{height:25px;overflow:auto}
.inav-theme-ecommerce .inav-menu ul li{height:22px;line-height:22px;border-bottom:3px solid #e6e6e6;margin:0}
.inav-theme-ecommerce .inav-menu ul li.current-menu{border-color:#d5d5d5}
.inav-theme-ecommerce .inav-menu ul li a{display:block;padding:0 10px;color:#4a4b4d}
.inav-theme-ecommerce .inav-menu ul li.current-menu a{color:#111;font-weight:normal}
.inav-theme-ecommerce .inav-arrows .inav-arrow{background-color:#fff;font-size:16px;font-weight:bold;padding:10px 3px;color:#f00}
.inav-theme-ecommerce .inav-arrows .inav-arrow:hover{background-color:#e7e7e7}
.inav-theme-ecommerce .inav-arrows .inav-arrow.disabled:hover{background-color:#fff}
.inav-theme-ecommerce .inav-arrows .inav-arrow.inav-prev-item{left:2px}
.inav-theme-ecommerce .inav-arrows .inav-arrow.inav-next-item{right:1px}
.inav-theme-portfolio .inav-slides ul li a{background-color:#333132}
.inav-theme-portfolio .inav-slides ul li a span.title{display:block;font-size:17px;color:#fff;font-weight:bold;text-align:left;padding:3px 10px;margin-bottom:4px}
.inav-theme-portfolio .inav-slides ul li a span.desc{display:block;font-size:12px;line-height:11px;color:#ccc;text-align:left;padding:1px 10px}
.inav-theme-portfolio .inav-arrows .inav-arrow{color:#fff;font-size:25px;font-weight:bold}
CSS代码(screen.css):
body{background-color:#2A2A2A;}
#head{position:relative;z-index:10;height:215px;background:#2b2b2b url(bg-head.png ) repeat-x;}
#menu{height:30px;padding-bottom:4px;background:url(bg-menu.png ) repeat-x;}
#menu #logo{float:left;font-size:25px;font-weight:bold;color:#fff;font-size:18px;height:30px;line-height:26px;text-shadow:0 1px 0 #000;}
#menu #logo:hover{text-decoration:none;}
#menu #navigation{float:right;}
#menu #navigation li{float:left;margin-left:20px;line-height:26px;}
#menu #navigation li a{color:#fff;font-size:13px;font-weight:bold;}
#menu #navigation li.current-menu-item a,#menu #navigation li a:hover{text-shadow:0 1px 0 #000;text-decoration:none;color:#ffb28c;}
#head #inav-dock{position:absolute;z-index:10;bottom:0;left:50%;margin-left:-470px;height:52px;background:url(bg-dock.png ) no-repeat;}
#high{height:90px;text-align:center;background-color:#fafafa;color:#0079c2;}
#high h1{margin-top:17px;font-size:30px;line-height:30px;font-weight:normal;}
#high h1 small{display:block;font-size:18px;color:#0079c2;}
#main{background-color:#fff;padding:25px 0;}
#foot{height:170px;background-color:#2a2a2a;}
#foot .container{padding-top:15px;}
#foot .container p{color:#9f9f9f;}
#foot .container p.copy{font-size:11px;line-height:13px;}
#foot .container #foot-logo{float:right;font-size:18px;font-weight:bold;color:#9f9f9f;font-size:18px;height:30px;line-height:26px;text-shadow:0 1px 0 #000;}
#foot .container #foot-logo:hover{text-decoration:none;}
#inav{position:absolute;z-index:10;top:-105px;left:50%;margin-left:-425px;width:850px;}
#inav .inav-slides ul li a{margin:0 auto;width:140px;}
#inav .inav-arrows a{width:41px;height:37px;background:url(bg-arrows.png ) no-repeat;}
#inav .inav-arrows a.inav-prev-item{left:-20px;background-position:0 -34px;}
#inav .inav-arrows a.inav-prev-item:hover{background-position:-41px -34px;}
#inav .inav-arrows a.inav-prev-item.disabled{background-position:-82px -34px;}
#inav .inav-arrows a.inav-next-item{right:-20px;}
#inav .inav-arrows a.inav-next-item:hover{background-position:-41px 0;}
#inav .inav-arrows a.inav-next-item.disabled{background-position:-82px 0;}
#inav .inav-arrows a{margin-top:0;top:auto;bottom:20px;padding:0;}
#inav .inav-menu{position:absolute;z-index:10;top:-25px;}
#inav .inav-menu li{padding:1px 6px;background-color:#fff;border-radius:2px;}
#inav .inav-menu li a{color:#fff;font-size:11px;color:#333;}
#inav .inav-menu li a:hover{text-decoration:none;}
#wide .section{margin-bottom:30px;}
#wide .section .strip{margin-top:16px;}
#wide .section .strip a{margin-left:20px;}
#wide .section .strip a:first-child{margin-left:0;}
#side .widget{padding-bottom:15px;margin-bottom:25px;border-bottom:1px dotted #ccc;}
#main h3{color:#0078c4;font-size:18px;margin-bottom:10px;font-weight:300;}
#side h3 small{float:right;color:#646464;font-style:italic;font-size:12px;line-height:30px;}
#main p{color:#646464;font-size:12px;}
#main #wide.span7 a,#main #side a{color:#ff6e5d;text-decoration:underline;}
#main .inav-theme-demo a{text-decoration:none;}
#main .theme-help{margin:25px 0 10px;}
.inav-theme-demo{position:relative;z-index:10;width:900px;}
.inav-theme-demo#inav-theme-ecommerce{width:908px;}
.inav-theme-demo#inav-theme-portfolio{width:920px;}
分享到QQ
分享到微博
微信扫一扫
