手机端fullpage.js触屏滑动页面展示特效



59 232 78



特效描述:手机端 fullpage.js 触屏滑动 页面展示特效,触屏滑动,手机页面展示,fullpage,滑动页面特效

代码结构

1. 引入CSS

<link type="text/css" href="css/reset.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<link type="text/css" href="css/jquery.fullPage.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>

3. HTML代码

<div id="fullpage">
  <div class="section page_1">
    <div class="bg"><img src="images/bg.jpg" alt=""></div>
    <h1>Hp</h1>
    <p>Sodium cyanide in Tianjin to be collected and neutralized soon</p>
    <p>Sodium cyanide in Tianjin to be collected and neutralized soon</p>
  </div>
  <div class="section page_2">
    <div class="wrap">
      <h2>Sodium cyanide in Tianjin to be collected and neutralized soon</h2>
      <div class="west_vs_east">
        <table>
          <tr>
            <td style="border-right:#515151 solid 2px;"><div class="box west">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon</h3>
              </div></td>
            <td><div class="box east">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon</h3>
              </div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="section page_3">
    <div class="wrap">
      <h2>Sodium cyanide in Tianjin to be collected and neutralized soon</h2>
      <div class="west_vs_east">
        <table>
          <tr>
            <td style="border-right:#515151 solid 2px;"><div class="box west">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon.</h3>
              </div></td>
            <td><div class="box east">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon!</h3>
              </div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="section page_4">
    <div class="wrap">
      <h2>Sodium cyanide in Tianjin to be collected and neutralized soon</h2>
      <div class="west_vs_east">
        <table>
          <tr>
            <td style="border-right:#515151 solid 2px;"><div class="box west">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon</h3>
              </div></td>
            <td><div class="box east">
                <h3>Sodium cyanide in Tianjin to be collected and neutralized soon!</h3>
              </div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="section page_5">
    <div class="wrap">
      <h2>Why Work with Hp?</h2>
      <ul>
        <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
        <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
        <li>Offer <span>65 MM+ fully tests</span> for <span>300,000+</span> mobile developers and <span>550,000+</span> apps worldwide.</li>
        <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
          <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
          <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
      </ul>
      <div class="operation_steps"><img src="images/img1.png" alt=""></div>
    </div>
  </div>
  <div class="section page_6">
    <div class="wrap">
      <h2>What Hp can do for developers?</h2>
      <div class="introduction">
        <table>
          <tr>
            <td><div class="box first"> <strong>Sodium cyanide in Tianjin to be collected and neutralized soon</strong>
                <ul>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                </ul>
              </div></td>
            <td><div class="box second"> <strong>eww & Swe Publish</strong>
                <ul>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                </ul>
              </div></td>
            <td><div class="box third"> <strong>asas & Monetize</strong>
                <ul>
                    <li>Sodium cyanide in Tianjin to be collected and neutralized soon</li>
                </ul>
              </div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="section page_7">
    <div class="wrap">
      <h2>Sodium cyanide in Tianjin to be collected and neutralized soon</h2>
      <div class="group_shareholders">
        <table>
          <tr>
            <td style="border-right:#515151 solid 2px;"><div class="box group">
                <h3>Hp Group</h3>
              </div></td>
            <td><div class="box shareholders">
                <h3>sdefdgr</h3>
              </div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片滑动 图片滑块 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到