以下是 jQuery全屏内容插件代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie9 ie8 ie7" lang="pt-br"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie9 ie8" lang="pt-br"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie9" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
<!-- CONFIGS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery全屏内容插件</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<div id="container">
<!-- Home -->
<div id="home" class="home">
<div class="wrap">
<h1>Jquery Full Content</h1>
<h2>Enables fully websites</h2>
<ul class="options">
<li>
<a href="#download">
<big>Download</big>
Ready for use
</a>
</li>
<li>
<a href="#what">
<big>What</big>
the plugin does
</a>
</li>
<li>
<a href="#documentation">
<big>Docs</big>
How use this plugin
</a>
</li>
</ul>
</div>
</div>
<!-- /Home -->
<!-- Download -->
<div id="download" class="download">
<div class="wrap">
<h2>What pack you want to download</h2>
<h3>Develop by <a href="" title="Zeh Fernandes" target="_blank">
Zeh Fernandes</a>. Special thanks to Zeno Rocha and Cezar Luiz.</h3>
<ul class="options big">
<li>
<a href="#">
<big>Minify</big>
Just the core
</a>
</li>
<li>
<a href="#">
<big>Complete</big>
Demo + core
</a>
</li>
</ul>
</div>
</div>
<!-- /Download -->
<!-- Documentation -->
<div id="documentation" class="documentation scrollv">
<div class="wrap">
<h2>Markup</h2>
<code>
<div id="container"><br/><br/>
<div id="stage1"><br/>
//The content of this page<br/>
</div><br/><br/>
<div id="stage2"><br/>
//The content of this page<br/>
</div><br/><br/>
</div>
</code>
<p>The id of stage is how you link</p>
<code><a href="#stage2">Go to stage2</a></code>
<h2>Style</h2>
<p>Don't show scroll bars</p>
<code>body { overflow-x: hidden; overflow-y: hidden; }</code>
<p>In case you need vertical scroll</p>
<code>stage1 { overflow-y: auto; }</code>
<h2>Javascript</h2>
<p>Put Jquery, ScrollTo Plugin and Jquery.fullContent</p>
<code>
<script src="js/jquery-1.x.x.min.js"
type="text/javascript"></script> <br/>
<script src="js/jquery.jquery.scrollTo.js"
type="text/javascript"></script> <br/>
<script src="js/jquery.jquery.fullContent.js"
type="text/javascript"></script> <br/>
</code>
<p>And you can configure this parameters:</p>
<code>
$('#container').fullContent({ <br/>
stages: 'div', <br/>
mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1},
{v: 2, h: 2}], <br/>
stageStart: 1, <br/>
speedTransition: 800, <br/>
idComplement: 'page_' <br/>
});
</code>
<h2>The Map Position</h2>
<p>This parameter you can configuring the position which want
your stage. V - vertical position H - horizontal position. For
example</p>
<code>
v1h1 | v1h2 <br/>
v2h1 | v2h2
</code>
<ul class="options small">
<li><a href="#home">
<big>Back</big>
to home
</a>
</li>
</ul>
</div>
</div>
<!-- /Documentation -->
<!-- What -->
<div id="what" class="what scrollv">
<div class="wrap">
<h2>What the plugin does</h2>
<ul class="list">
<li>Create fully containers with width and height of
window</li>
<li>Dynamic position: Each container could have vertical
and horizontal position set</li>
<li>History hash in URL</li>
<li>Scroll animation between containers</li>
<li>Simple configuration and easy use</li>
</ul>
<ul class="options small">
<li><a href="#home">
<big>Back</big>
to home
</a>
</li>
</ul>
</div>
</div>
<!-- /What -->
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/scrollTo.min.js"></script>
<script src="js/jquery.fullContent.min.js"></script>
<script type="text/javascript">
$('#container').fullContent({
stages: 'div',
mapPosition: [{v: 1, h: 3}, {v: 1, h: 1}, {v: 1, h: 6}, {v: 3, h: 3}],
stageStart: 1,
idComplement: 'page_'
});
</script>
</body>
</html>
JS代码(jquery.fullContent.min.js):
/* * Project:Jquery FullContent * Description:Plugin which allows a full content browser navigation. Flexible and Extended. * Author:Zeh Fernandes | zehfernandes.com * This plugin needs jquery.ScrollTo http://demos.flesler.com/jquery/scrollTo/ to work. */
(function(a,b,c){
function g(c,e){
this.element=c,this.$window=a(b),this.options=a.extend({
}
,f,e),this._defaults=f,this._name=d,this.init(),this.configStage()}
var d="fullContent",e=b.document,f={
stages:"div",idComplement:"page_",stageStart:1,speedTransition:800,mapPosition:""}
;
g.prototype.configStage=function(){
var c=this.$window.width(),d=this.$window.height(),e=this.options.stages,f=this.options.mapPosition,g=0;
a(this.element).children(e).each(function(b){
a(this).css({
position:"absolute",width:c,height:d}
);
if(f[b]){
var e=f[b];
a(this).css({
top:d*(e.v-1),left:c*(e.h-1)}
)}
else a(this).css({
top:d*g}
);
g++}
);
if(b.location.hash){
var h=b.location.hash.replace(/^#\/?/,"");
a.scrollTo("#"+this.options.idComplement+h,0)}
}
,g.prototype.init=function(){
var c=this,d=this.options.stages,e=this.options.idComplement;
a(this.element).children(d).each(function(d){
var f=a(this).attr("id");
a(this).attr("id",e+f),!b.location.hash&&c.options.stageStart==d+1&&(a.scrollTo(a(this),0),b.location.hash=a(this).attr("id").replace(e,""))}
),this.bind()}
,g.prototype.bind=function(){
var c=this,d=this.options.speedTransition,e=this.options.idComplement;
this.$window.resize(function(){
c.configStage()}
),this.$window.bind("hashchange",function(e){
var f=b.location.hash.replace(/^#\/?/,"");
a.scrollTo("#"+c.options.idComplement+f,d)}
)}
,a.fn[d]=function(b){
return this.each(function(){
a.data(this,"plugin_"+d)||a.data(this,"plugin_"+d,new g(this,b))}
)}
}
)(jQuery,window)CSS代码(reset.css):
/*File:Reset v1.6.1Authors:Richard Clark - http://richclarkdesign.comDate:2010-09-17*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div{display:block;position:relative;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
CSS代码(style.css):
/*Name:Jquery Full ContentAuthors:Zeh FernandesDate:2012-05-04*/
/* TYPOGRAPHY */
/* ----------------------------------------- */
@font-face{font-family:'FuturaLT-Condensed';src:url('../fontes/futuralt-condensed.eot');src:url('../fontes/futuralt-condensed.eot?#iefix') format('embedded-opentype'),url('../fontes/futuralt-condensed.woff') format('woff'),url('../fontes/futuralt-condensed.ttf') format('truetype'),url('../fontes/futuralt-condensed.svg#futuralt-condensed') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'GillSansLight';src:url('../fontes/gillsanslight.eot');src:url('../fontes/gillsanslight.eot?#iefix') format('embedded-opentype'),url('../fontes/gillsanslight.woff') format('woff'),url('../fontes/gillsanslight.ttf') format('truetype'),url('../fontes/gillsanslight.svg#gillsanslight') format('svg');font-weight:normal;font-style:normal;}
/* ALL */
/* ----------------------------------------- */
body{background:url(../images/bg.jpg);overflow-x:hidden;overflow-y:hidden;color:#fff;font-family:'GillSansLight',HeveticaNeue-Light,sans-serif;}
.scrollv{overflow-y:auto !important;}
.wrap{width:80%;margin:0 auto;}
h1,h2{font-weight:normal;text-transform:uppercase;text-align:center;}
h1{font-family:'FuturaLT-Condensed';font-size:111px;letter-spacing:-5px;padding-top:30px;}
h2{font-family:'GillSansLight';font-size:50px;letter-spacing:-2px;}
h3{font-family:'GillSansLight';font-size:22px;font-weight:normal;text-align:center;padding-top:5px;}
h3 a,h2 a{color:#775995;text-decoration:none;}
h3 a:hover,h2 a:hover{text-decoration:underline;}
.options{list-style:none;margin-top:8%;overflow:hidden;}
.options li{float:left;width:33%;height:350px;}
.options li:last-child{margin-right:0;}
.options a{display:block;width:250px;height:165px;border-radius:50%;border:2px solid #fff;color:#fff;text-decoration:none;font-size:25px;text-align:center;padding-top:85px;font-family:'GillSansLight';margin:0 auto;}
.options a big{display:block;font-size:50px;}
.options a:hover{background:rgba(217,45,237,0.15);}
code{color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.2);padding:20px;background:rgba(255,255,255,0.3);clear:both;position:relative;display:block;margin:10px 0;border-radius:10px;}
p{font-size:16px;color:#fff;padding-top:15px;}
/* SPECIFICS */
/* ----------------------------------------- */
.big li{width:50%;height:auto;}
.big li a{width:300px;height:190px;padding-top:110px;margin:0 5%;}
.big li:first-child a{float:right;}
.small li{width:100%;height:auto;}
.small li a{width:180px;height:115px;padding-top:65px;font-size:20px;}
.small a big{font-size:35px}
.documentation h2{padding:40px 0 20px 0;}
.download h2:first-child,.documentation h2:first-child,.what h2:first-child{padding-top:8%;}
.list{font-size:25px;list-style:disc;margin:3% 10%}
.list li{margin:10px 0;}
.documentation .wrap{overflow:hidden;padding-bottom:50px;}
/* MEDIA QUERIES */
/* ----------------------------------------- */
@media screen and (max-width:1000px){h1{font-size:90px}
h2{font-size:40px;letter-spacing:normal;}
.home,.download{overflow-y:scroll;}
.options li{float:none;display:inline-block;width:100%;height:auto;margin-bottom:3%;}
.big li a{float:none !important;margin:0 auto;}
分享到QQ
分享到微博
微信扫一扫
