HorizSplitBox.js/demo.html at master · lc-soft/HorizSplitBox.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<link href="horiz-split-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="horiz-split-box">
    <div class="cover">
      <div class="content">
        <p>W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device. Although the boundaries of the platform continue to evolve, industry leaders speak nearly in unison about how HTML5 will be the cornerstone for this platform. But the full strength of the platform relies on many more technologies that W3C and its partners are creating, including CSS, SVG, WOFF, the Semantic Web stack, XML, and a variety of APIs.</p>
        <p>W3C develops these technical specifications and guidelines through a process designed to maximize consensus about the content of a technical report, to ensure high technical and editorial quality, and to earn endorsement by W3C and the broader community.</p>
      </div>
    </div>
    <div class="content">
      <p>W3C标准定义了一个用于应用程序开发的开放Web平台，具有前所未有的潜力，使开发人员能够在任何设备上提供丰富的互动体验，由庞大的数据存储提供支持。 虽然平台的边界继续发展，但行业领导者几乎一致地谈到HTML5如何成为这个平台的基石。 但是，平台的全部力量依赖于W3C及其合作伙伴正在创造的更多技术，包括CSS，SVG，WOFF，语义Web堆栈，XML和各种API。</p>
      <p>W3C通过旨在最大限度地达成技术报告内容的共识，确保高技术和编辑质量，并获得W3C和更广泛的社群认可的过程，开发这些技术规范和指南。</p>
    </div>
    <div class="toggle-handle">
      <div class="toggle-handle-button"></div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="horiz-split-box.js"></script>
<script>
$('.horiz-split-box').horizSplitBox();
</script>
</body>
</html>