web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网站模板
>
后台模板
jQuery和html5全屏响应式文章水平横向布局
分类:
后台模板
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
##### HTML html结构使用一个包裹div包住左侧固定的导航栏和右侧的文章div。包裹div如下: ```html
``` 左侧固定菜单的结构如下: ```html
Go to the top
``` 右侧内容区域的结构如下: ```html
Introduction
...
Chapter I.
Variation Under Domestication
Causes of Variability
...
``` 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(); } }); ```
相关推荐
设计团队博客css网站模板
无人机数码商店网站模板
移动版猎豹安全浏览器官网html5动画引导页
微信小程序的手势密码
白色简约布局html5模板
响应式商品展示和商品信息比较网格布局界面
广告
广告