Question

是否可以使用javascript进行分屏视图，以便同时查看网站的两个部分？当您需要编辑或查看一个文档的两个独立部分时，我期待制作类似Microsoft Word的内容。

Answer 1

我找到了split.js

Split.js是一个轻量级的，不受影响的实用程序，用于创建可调整的拆分视图或窗格

<强> HTML：

<div id="a" class="split split-horizontal">
  <div id="c" class="split content"></div>
  <div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
  <div id="e" class="split content"></div>
  <div id="f" class="split content"></div>
</div>

<强>使用Javascript：

Split(['#a', '#b'], {
  gutterSize: 8,
  cursor: 'col-resize'
})
Split(['#c', '#d'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})
Split(['#e', '#f'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})

Demo

Answer 2

您可以使用frameset标记。

<frameset cols="250px,*">
  <frame src="/your/menu/bar">
  <frameset rows="50%,*">
    <frame src="/your/splitted/content">
    <frame src="/your/splitted/content">
  </frameset>
</frameset>

每个框架都可以由JS操纵

Answer 3

我不知道有什么可以直接为此做好准备，但我有一个可以帮助你的想法。

使用画布并制作文档的屏幕截图。将画布放在屏幕的一部分上，将实际文档放在anoter上。用户点击画布的那一刻，切换真实项目和画布的位置。你可以逃脱这种作弊，重点只能在一个地方一次。当然你需要重新设置ofvs oftern，你需要使用滚动位置，但它可以变得很好。

Javascript分屏视图

3 个答案: