UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 HTML5精选 HTML5全屏两列布局网页模板

HTML5全屏两列布局网页模板

cat77 论坛 2016-5-11 11:50
分享到:
摘要: 这是一款非常有创意和实用的HTML5全屏两列布局网页模板。在大屏幕设备中,该模板以两列布局的方式出现,用户可以通过点击导航按钮来切换页面,新的内容会覆盖旧的内容。在小屏幕设备上,会以画廊的显示显示所有的项 ...
1.jpg

  下载插件 HTML5全屏两列布局网页模板.zip

  简要教程

  这是一款非常有创意和实用的HTML5全屏两列布局网页模板。在大屏幕设备中,该模板以两列布局的方式出现,用户可以通过点击导航按钮来切换页面,新的内容会覆盖旧的内容。在小屏幕设备上,会以画廊的显示显示所有的项目,点击相应的项目会全屏滑出相应的内容面板。

  制作方法

  HTML结构

  该两列布局网页模板的HTML结构分为两个主要的部分:第一个是所有项目的图片-.cd-images-list,它们都被设置为背景图片。第二个是项目的描述部分。这两个部分分别被包裹在不同的<div>中。另外还使用ul.block-navigation来制作整个项目的导航按钮。
  1. <div class="cd-image-block">
  2.   <ul class="cd-images-list">
  3.     <li class="is-selected">
  4.       <a href="#0">
  5.         <h2>2 Blocks Template</h2>
  6.       </a>
  7.     </li>
  8.   
  9.     <li>
  10.       <a href="#0">
  11.         <h2>Project Two</h2>
  12.       </a>
  13.     </li>
  14.   
  15.     <!-- other list items here -->
  16.   </ul>
  17. </div> <!-- .cd-image-block -->
  18.   
  19. <div class="cd-content-block">
  20.   <ul>
  21.     <li class="is-selected">
  22.       <div>
  23.         <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, illo!</h2>
  24.          
  25.         <!-- additional content here -->
  26.       </div>
  27.     </li>
  28.   
  29.     <li>
  30.       <div>
  31.         <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
  32.          
  33.         <!-- additional content here -->
  34.       </div>
  35.     </li>
  36.   
  37.     <!-- other list items here -->
  38.   </ul>
  39.   
  40.   <button class="cd-close">Close</button>
  41. </div> <!-- .cd-content-block -->
  42.   
  43. <ul class="block-navigation">
  44.   <li><button class="cd-prev inactive">← Prev</button></li>
  45.   <li><button class="cd-next">Next →</button></li>
  46. </ul> <!-- .block-navigation -->   
复制代码
        
  CSS样式

  在移动手机等小屏幕设备中,.cd-content-block 元素(它包含项目的描述信息)使用固定定位,并且开始时被移动到屏幕之外,因此只有项目的图片列表可以被看见。当用户点击或触摸了某个项目图片,.cd-content-block元素被移动回屏幕中(使用.is-visible class),这时对应的项目描述信息会被添加.is-selected class。没有被添加这个class的项目的opacity和visibility属性会分布设置为0和hidden。
  1. .cd-content-block {
  2.   /* move the block outside the viewport (to the right) - mobile only */
  3.   position: fixed;
  4.   z-index: 1;
  5.   top: 0;
  6.   left: 0;
  7.   transform: translateX(100%);
  8.   transition: transform 0.3s;
  9. }
  10. .cd-content-block.is-visible {
  11.   transform: translateX(0);
  12. }
  13. .cd-content-block > ul > li {
  14.   position: absolute;
  15.   height: 100%;
  16.   overflow-y: scroll;
  17.   opacity: 0;
  18.   visibility: hidden;
  19. }
  20. .cd-content-block > ul > li.is-selected {
  21.   /* this is the selected content */
  22.   position: relative;
  23.   opacity: 1;
  24.   visibility: visible;
  25. }
复制代码
               
  在大屏幕的设备中(视口大于768像素),.cd-image-block(项目图片)和.cd-content-block(项目描述)分别设置为50%宽度,和100%高度,以及一个overflow: hidden属性。这样可以使不在这个区域中的子元素隐藏起来。

  默认情况下,.cd-image-block > ul > li和.cd-content-block > ul > li元素都被移动到右侧屏幕之外(使用translateX(100%))。因为它们的父元素设置了overflow: hidden,所以它们是不可见的。

  当某个项目被选择的时候,相应的项目图片和项目说明被添加.is-selected class,移动回屏幕中,这时它们变为可见状态。
  1. @media only screen and (min-width: 768px) {
  2.   .cd-image-block,
  3.   .cd-content-block {
  4.     /* slider style - desktop version only */
  5.     width: 50%;
  6.     float: left;
  7.     height: 100vh;
  8.     overflow: hidden;
  9.   }
  10.   .cd-image-block > ul,
  11.   .cd-content-block > ul {
  12.     position: relative;
  13.     height: 100%;
  14.   }
  15.   .cd-image-block > ul > li,
  16.   .cd-content-block > ul > li {
  17.     position: absolute;
  18.     top: 0;
  19.     left: 0;
  20.     height: 100%;
  21.     width: 100%;
  22.     /* by default, the items are moved to the right - relative to their parent elements */
  23.     transform: translateX(100%);
  24.     transition: transform 0.5s;
  25.   }
  26.   .cd-image-block > ul > li.is-selected,
  27.   .cd-content-block > ul > li.is-selected {
  28.     /* this is the visible item */
  29.     position: absolute;
  30.     transform: translateX(0);
  31.   }
  32.   .cd-image-block > ul > li.move-left,
  33.   .cd-content-block > ul > li.move-left {
  34.     /* this is the item hidden on the left */
  35.     transform: translateX(-100%);
  36.   }
  37. }
复制代码
               
  JavaScript

  该两列布局模板使用jQuery来实现项目的导航功能。并在移动手机版本中监听.cd-images-list > li > a元素的点击事件来打开相应的项目面板。

  updateBlock()函数用于更新可见的项目,它在大屏幕和小屏幕中都起作用。
  1. function updateBlock(n, device) { //n is the index of the selected project
  2.   var imageItem = imagesList.eq(n), //imageList contains the .cd-images-list > li elements
  3.     contentItem = contentList.eq(n); //contentList contains the .cd-content-block > ul > li elements
  4.    
  5.   //this function assigns the is-selected class to the 2 selected list items, removing it from their siblings
  6.   classUpdate($([imageItem, contentItem]));
  7.    
  8.   if( device == 'mobile') {
  9.     //on mobile version
  10.     contentItem.scrollTop(0);
  11.     //add a cover layer to the images
  12.     $('.cd-image-block').addClass('content-block-is-visible');
  13.     //move the slide-in panel back into the viewport
  14.     contentWrapper.addClass('is-visible');
  15.   } else {
  16.     //hide scrolling bar while changing project content
  17.     contentList.addClass('overflow-hidden');
  18.     contentItem.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  19.       //wait for the end of the animation
  20.       contentItem.siblings().scrollTop(0);
  21.       contentList.removeClass('overflow-hidden');
  22.     });
  23.   }
  24.   
  25.   //this function updates the visibility of the .block-navigation buttons according to visible project
  26.   updateBlockNavigation(n);
  27. }
复制代码
分享到:
已有2条评论

最新评论

「狂神战天」
html5的时代快要到来了么
劍武滄穹
html5的时代快要到来了么

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部