素材8网-专注前端素材！
来源：https://www.sucai8.cn/15420.html

滑动预览图像面板模板与jQuery

  • 2740
  • 0
  • 0


这是一个简单的组合模板，其中项目预览图像向外滑出以显示所选项目。

我们并不陌生，尝试用投资组合的模板 。 这一次，我们一直在努力将内容块移动为从主/库页面过渡到项目页面的方式。 所有面板沿y轴（较小设备上的x轴）移动，并且移动由用户是否想要了解项目或想要访问导航来触发。

创建结构

HTML结构由两个无序列表组成，ul.cd-projects-previews用于项目预览图像，ul.cd-projects用于项目详细信息，anav.cd-primary-nav包装主导航。


  1. <div class="cd-projects-container">
  2.         <ul class="cd-projects-previews">
  3.                 <li>
  4.                         <a href="#0">
  5.                                 <div class="cd-project-title">
  6.                                         <h2>Project 1</h2>
  7.                                         <p>Brief description of the project here</p>
  8.                                 </div>
  9.                         </a>
  10.                 </li>

  12.                 <li>
  13.                         <!-- project preview here -->
  14.                 </li>
  15.                
  16.                 <!-- other project previews here -->
  17.         </ul> <!-- .cd-projects-previews -->

  19.         <ul class="cd-projects">
  20.                 <li>
  21.                         <div class="preview-image">
  22.                                 <div class="cd-project-title">
  23.                                         <h2>Project 1</h2>
  24.                                         <p>Brief description of the project here</p>
  25.                                 </div>
  26.                         </div>

  28.                         <div class="cd-project-info">
  29.                                 <!-- project description here -->
  30.                         </div> <!-- .cd-project-info -->
  31.                 </li>

  33.                 <!-- projects here -->
  34.         </ul> <!-- .cd-projects -->

  36.         <button class="scroll cd-text-replace">Scroll</button>
  37. </div> <!-- .cd-project-container -->

  39. <nav class="cd-primary-nav" id="primary-nav">
  40.         <ul>
  41.                 <li class="cd-label">Navigation</li>
  42.                 <li><a href="#0">The team</a></li>
  43.                 <!-- navigation items here -->
  44.         </ul>
  45. </nav> <!-- .cd-primary-nav -->
复制代码
相关素材
滑动预览图像面板模板与jQuery
  • Royal 刚刚下载了一个素材
  • qqUnknownFAu 刚刚下载了一个素材
  • qq就这样吧lCR 刚刚下载了一个素材
  • qqRongHWX 刚刚下载了一个素材
  • 淘鸿实业 刚刚下载了一个素材
  • qq饭桶g1K 刚刚下载了一个素材
  • 小鸡墩墩 刚刚下载了一个素材
  • 天王盖地虎 刚刚下载了一个素材
  • qq123iIe 刚刚下载了一个素材
  • qqCxKA3 刚刚下载了一个素材
  • 恰逢花开 刚刚下载了一个素材
  • qqQqdkE 刚刚下载了一个素材
  • qq海风kNR 刚刚下载了一个素材
  • qq玖玖fJ2 刚刚下载了一个素材
  • 丶yoyo 刚刚下载了一个素材
分享者：
分享者头像
xiaozhi
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2026  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题