html图片全屏显示插件,jQuery全屏内容显示插件

特效描述：jQuery 全屏内容显示插件。jQuery全屏内容显示插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Jquery Full Content

Enables fully websites

• Download

  Ready for use

• What

  the plugin does

• Docs

  How use this plugin

What pack you want to download

Develop by

Zeh Fernandes

. Special thanks to Zeno Rocha and Cezar Luiz.

• Minify

  Just the core

• Complete

  Demo + core

Markup

<div id="container">

  <div id="stage1">

  //The content of this page

  </div>

  <div id="stage2">

  //The content of this page

  </div>

</div>

The id of stage is how you link

<a href="#stage2">Go to stage2</a>

Style

Don't show scroll bars

body { overflow-x: hidden; overflow-y: hidden; }

In case you need vertical scroll

stage1 { overflow-y: auto; }

Javascript

Put Jquery, ScrollTo Plugin and Jquery.fullContent

<script src="js/jquery-1.x.x.min.js"

type="text/javascript"></script>

<script src="js/jquery.jquery.scrollTo.js"

type="text/javascript"></script>

<script src="js/jquery.jquery.fullContent.js"

type="text/javascript"></script>

And you can configure this parameters:

$('#container').fullContent({

  stages: 'div',

  mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1},

{v: 2, h: 2}],

  stageStart: 1,

  speedTransition: 800,

  idComplement: 'page_'

});

The Map Position

This parameter you can configuring the position which want

your stage. V - vertical position H - horizontal position. For

example

v1h1 | v1h2

v2h1 | v2h2

• Back

  to home

What the plugin does

• Create fully containers with width and height of

  window

• Dynamic position: Each container could have vertical

  and horizontal position set

• History hash in URL
• Scroll animation between containers
• Simple configuration and easy use

• Back

  to home

$('#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_'

});