html布局5比3,jQuery和html5全屏响应式文章水平横向布局

这是一款jQuery和html5全屏响应式文章水平横向布局网页模板。在这个模板插件中使用了一些非常有用的jQuery插件。

插件中的文章是达尔文(Charles Darwin)的《物种起源》，你要想看全文，请点击Project Gutenberg。

HTML

html结构使用一个包裹div包住左侧固定的导航栏和右侧的文章div。包裹div如下：

左侧固定菜单的结构如下:

The

Origin of

Species

6^th Edition

by Charles Darwin

Introduction

Chapter I.

Variation under Domestication

Chapter II.

Variation Under Nature

Go to the top

右侧内容区域的结构如下:

Introduction

...

Chapter I.

Variation Under Domestication

Causes of Variability

...

class为hs-content-scroller的div实际上是一个遮罩，它的宽度和高度与屏幕的宽度高度相同。第二个class为hs-content-wrapper的div的宽度是所有文章宽度的总和，这种结构将使文章可以水平滚动。

JAVASCRIPT

首先要初始化一些变量参数：

var $container = $( '#hs-container' ),

// the scroll container that wraps the articles

$scroller = $container.find( 'div.hs-content-scroller' ),

$menu = $container.find( 'aside' ),

// menu links

$links = $menu.find( 'nav > a' ),

$articles = $container.find( 'div.hs-content-wrapper > article' ),

// button to scroll to the top of the page

// only shown when screen size < 715

$toTop = $container.find( 'a.hs-totop-link' ),

// the browser nhistory object

History = window.History,

// animation options

animation = { speed : 800, easing : 'easeInOutExpo' },

// jScrollPane options

scrollOptions = { verticalGutter : 0, hideFocus : true },

然后执行初始化函数：

init = function() {

// initialize the jScrollPane on both the menu and articles

_initCustomScroll();

// initialize some events

_initEvents();

// sets some css properties

_layout();

// jumps to the respective chapter

// according to the url

_goto();

},

接下来要做的是创建和初始化jScrollPane，用它来创建自定义滚动条。特别指出的是，当屏幕的像素小于715px时，将不会执行该操作：

_initCustomScroll = function() {

// Only add custom scrolling to articles if screen size > 715.

// If not, the articles will be expanded (vertical layout)

if( $(window).width() > 715 ) {

$articles.jScrollPane( scrollOptions );

}

// add custom scrolling to menu

$menu.children( 'nav' ).jScrollPane( scrollOptions );

},

当浏览器窗口大小改变时，需要重新初始化jScrollPane来适应当前窗口，或者当窗口小于715px时将其销毁。

我们使用History.js来控制用户浏览文章的历史。

$(window).on({

// when resizing the window we need to reinitialize or destroy the jScrollPanes

// depending on the screen size

'smartresize' : function( event ) {

_layout();

$('article.hs-content').each( function() {

var $article = $(this),

aJSP = $article.data( 'jsp' );

if( $(window).width() > 715 ) {

( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

_initArticleEvents();

}

else {

// destroy article's custom scroll if screen size <= 715px

if( aJSP !== undefined )

aJSP.destroy();

$container.off( 'click', 'article.hs-content' );

}

});

var nJSP = $menu.children( 'nav' ).data( 'jsp' );

nJSP.reinitialise();

// jumps to the current chapter

_goto();

},

// triggered when the history state changes - jumps to the respective chapter

'statechange' : function( event ) {

_goto();

}

});

css代码和其他js代码请参考下载文件。