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

你的名字 2022-10-09 04:57 373阅读 0赞

特效描述：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





//The content of this page



//The content of this page

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

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_‘

});

发表评论

表情：
评论列表 （有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读