码迷,mamicode.com
首页 > 其他好文 > 详细

极盗者-带你领略八项极限挑战(含代码)

时间:2015-12-18 21:02:09      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
 
</div>

 

<!-- 推荐开源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>

更多代码:http://www.gbtags.com/gb/rtreplayerpreview/2421.htm

极盗者-带你领略八项极限挑战(含代码)

标签:

原文地址:http://www.cnblogs.com/gbtagscom/p/5057913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!