極盜者-帶你領略八項極限挑戰（含代碼）

時間  2019-12-11
標籤 領略 極限 挑戰 代碼 简体版
原文   原文鏈接

<!-- HTML代碼片斷中請勿添加<body>標籤 //-->
<div id="container">
 
</div>javascript

 

<!-- 推薦開源CDN來選取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<!--
Please note, that you can apply .m--global-blending-active to .fnc-slider
to enable blend-mode for all background-images or apply .m--blend-bg-active
to some specific slides (.fnc-slide). It's disabled by default in this demo,
because it requires specific images, where more than 50% of bg is transparent or monotone
-->
<div class="demo-cont">
  <!-- slider start -->
  <div class="fnc-slider example-slider">
    <div class="fnc-slider__slides">
      <!-- slide start -->
      <div class="fnc-slide m--blend-green m--active-slide">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>1</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>山地越野</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              更多極限
              <span data-text="Credits">更多極限</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-dark">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>2</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>翼裝飛行</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              更多極限
              <span data-text="Credits">更多極限</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>3</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>高山滑雪</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              更多極限
              <span data-text="Credits">更多極限</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-blue">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>4</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>徒手攀巖</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              更多極限
              <span data-text="Credits">更多極限</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
    </div>
    <nav class="fnc-nav">
      <div class="fnc-nav__bgs">
        <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
        <div class="fnc-nav__bg m--navbg-dark"></div>
        <div class="fnc-nav__bg m--navbg-red"></div>
        <div class="fnc-nav__bg m--navbg-blue"></div>
      </div>
      <div class="fnc-nav__controls">
        <button class="fnc-nav__control">
          山之永住
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          風之永動
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          冰之固結
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          生命主宰
          <span class="fnc-nav__control-progress"></span>
        </button>
      </div>
    </nav>
  </div>
  <!-- slider end -->
  <div class="demo-cont__credits">
    <div class="demo-cont__credits-close"></div>
    <h3 class="demo-cont__credits-heading">尾崎八項挑戰</h3>
  <h4>地之覺醒（天坑着陸）</h4>
  <h4>水之生靈（天然衝浪）</h4>
  <h4>風之永動（翼裝飛行）</h4>
  <h4>冰之固結（高山滑雪）</h4>
  <h4> 山之永固（山地越野）</h4>
  <h4>生命主宰（徒手攀巖）</h4>
  <h4>絕對信任（信念之跳） </h4>
 
  </div>
</div>java

更多代碼：http://www.gbtags.com/gb/rtreplayerpreview/2421.htmjquery

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程