当前位置：首页 > 网站模板 > 后台模板

jQuery和html5全屏响应式文章水平横向布局

分类：后台模板日期：2024-05-14 点击(2) 评论(0)

简介

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

```html
<div id="hs-container" class="hs-container">
    
</div>
```
左侧固定菜单的结构如下:

```html
<aside class="hs-menu" id="hs-menu">
    <div class="hs-headline">
        <h1>
            <small>The</small> 
            Origin <small>of</small> 
            Species
        </h1>
        <small>6<sup>th</sup> Edition</small>
        <span class="author">by Charles Darwin</span>
    </div>   
    <nav>
        <a href="#introduction">
            <span>Introduction</span>
        </a>
        <a href="#chapter1">
            <span>Chapter I.</span>
            <span>Variation under Domestication</span>
        </a>
        <a href="#chapter2">
            <span>Chapter II.</span>
            <span>Variation Under Nature </span>
        </a>
        
    </nav> 
</aside>
<a href="#hs-menu" class="hs-totop-link">Go to the top</a>
```
右侧内容区域的结构如下:

```html
<div class="hs-content-scroller">
    <div class="hs-content-wrapper">  
        <article class="hs-content" id="introduction">
            <div class="hs-inner">
                <h2>Introduction</h2>
                <p>...</p>
            </div>
        </article>
         
        <article class="hs-content" id="chapter1">
            <div class="hs-inner">
                <h2>Chapter I.</h2>
                <h3>Variation Under Domestication</h3>
                <h4>Causes of Variability</h4>
                <p>...</p>
            </div>
        </article>     
         
    </div>  
</div>
```
class为hs-content-scroller的div实际上是一个遮罩，它的宽度和高度与屏幕的宽度高度相同。第二个class为hs-content-wrapper的div的宽度是所有文章宽度的总和，这种结构将使文章可以水平滚动。

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

```html
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 },
```
然后执行初始化函数：

```html
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时，将不会执行该操作：

```html
_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来控制用户浏览文章的历史。

```html
$(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();
    }
});
```

web299.com

jQuery和html5全屏响应式文章水平横向布局

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面