<!-- 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

转载于:https://www.cnblogs.com/gbtagscom/p/5057913.html

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

  1. 八维计算机学校宿迁,带您领略八维宿迁校区的大美风光(上)

    带您领略八维宿迁校区的大美风光(上) 来源:北京八维教育| 2020-05-08| 阅读量:1779 "天共水,水远与天连.天净水平寒月漾,水光月色两相兼.月映水中天. 人与景,人景古难全. ...

  2. 买入股票后必须遵守的八项原则

    买入股票以后,如果你有时间盯盘,选择的又是短线投资方式,那么,在遵守三大纪律的前提下,注意掌握运用好以下八项注意,可助你投资过程更加完美. 一要注意波段操作,追求利润更大化.掌握一种应手的指标,紧盯手 ...

  3. 设计师:设计师之家装材料知识之家装八项(吊顶材料、门窗材料、五金材料、墙面材料、地面材料、胶粘材料、油漆材料、水电材料等)之详细攻略

    设计师:设计师之家装材料知识之家装八项(吊顶材料.门窗材料.五金材料.墙面材料.地面材料.胶粘材料.油漆材料.水电材料等)之详细攻略 目录 家装八项 吊顶材料 门窗材料 五金材料 墙面材料 地面材料 ...

  4. 一名合格的IT项目经理 这八项核心技能不能缺

    优秀的IT项目管理者决定着业务举措的最终成败,但真正的顶尖人才还需要具备独特的综合性技能储备--既包括硬技术水平.又拥有软技能素养.在今天的文章中,我们将一同了解招募项目管理专家时需要关注的八项核心技 ...

  5. “网络相亲”三大纪律八项注意

    一.三大纪律 1.见面前一定要互换照片     这并不是说我们那么在乎对方的相貌,而是因为人对于容貌有一个适应和接受的过程,就是再其貌不扬的人,看得久了,有心理承受能力了,也能接受.但是如果没有经过这 ...

  6. 单反相机镜头的ldquo;三大纪律,八项注意rdquo;

    (转至:http://www.xcar.com.cn/bbs/viewthread.php?tid=11995281&extra=page%3D1&showthread=&pa ...

  7. 博客园客户端UAP开发随笔 -- App UI设计的三大纪律八项注意

    前言 每一个页面都是这个App的门面,尤其是主页面,看上去干净整洁清爽宜人容易操作,那么你的App就成功了一半.这也反映出了你这个开发团队的基本审美素质和设计理念.如果你不是一个团队,而是一个个人开发 ...

  8. 电子杂志制作软件:iebook超级精灵2008金牌版 八项全球首创•八大领先技术

    八项全球首创•八大领先技术 iebook超级精灵2008八项全球首创: 1.全球首创•自定义杂志制作尺寸大小,根据需求任意更改尺寸,适合版面创意效果: 2.全球首创•自定义杂志皮肤任意更换,超多模版皮 ...

  9. 攒机的“三大忌律 八项注意”

    对于那些想攒机且又对电脑初来乍到的朋友来说,最应该防范的就是传统观念的惯性和奸商的忽悠.我们怎么样才能造就一身反忽悠的本领呢?那就听我总结一下攒机的"三大'忌'律 八项注意"吧. ...

最新文章

  1. LeetCode(7.整数反转)JAVA
  2. mfc对话框在不同计算机上显示不全
  3. 前台一键备份数据库+PHP实现方式
  4. 使用jquery版本的viewer.js图片更新的问题
  5. 小米集团本周再回购1920万港元股票
  6. webstorm plugins emmet
  7. PhpSpreadsheet如何读取excel文件
  8. 【转】ASP.NET AJAX入门系列(9):使用ScriptManager控件
  9. 绘制Linux/Android设备的内存动态变化趋势图
  10. 按键精灵java_Java 按键精灵
  11. JAVA实现 - 问题 G: 超大型 LED 显示屏
  12. 博饼程序-Java实验
  13. ACL 2022 | PLATO-LTM:具有长期记忆机制的对话生成框架
  14. vue有纵向和横向表头表格
  15. 开机所有网卡全部down掉解决方法,ens33 down
  16. 玻色量子CEO文凯受邀出席首经贸金融学院系列讲座
  17. CSS:颜色、背景和剪切
  18. DNA: 人类的终极U盘
  19. 查看表之间的关系 需要在eas中的商业分析-扩展报表中心-报表平台下的语义层方案管理...
  20. php正则表达式替换字符,php正则表达式如何替换字符

热门文章

  1. 缓存解释(一级缓存,二级缓存)
  2. 电脑端无需下载软件制作动图教程
  3. 【下载查询资料】资料链接_liangchaoxi的IT博客_新浪博客
  4. 高尔夫launch monitor
  5. android--emo的来源
  6. Ubuntu14下制作绿色版MariaDB_20160601_七侠镇莫尛貝
  7. 初次组装台式机-618自营-装机配置单-3000价位中上普通家用型主机
  8. Unity单例模式写法
  9. 【翻译】PCI Express –信号完整性和EMI
  10. python解析xml文件最好选用的模块_用Python解析XML文件