一种html文件实现显示浏览器窗口内容的方法

【技术领域】

[0001]本发明涉及html领域，特别涉及一种html文件实现显示浏览器窗口内容的方法。

【背景技术】

[0002]—般的浏览器窗口显示需要通过使用用户点击的方式，或者通过其他的方式进行操作，然而，却没有一种通过自动操作的方式实现该操作。

【发明内容】

[0003]基于此，提供了一种html文件实现显示浏览器窗口内容的方法。

[0004]—种html文件实现显示浏览器窗口内容的方法，所述方法包括:

接收用户输入的用于显示窗口内容的移动轨迹；

修改html文件中对应于浏览器窗口内容的CSS代码，以浏览器打开所述窗口内容；

修改CSS代码中窗口内容的配置数据，以显示窗口内容和浮动栏。

[0005]上述方法，通过一种html文件实现显示浏览器窗口内容的方法，所述方法包括:接收用户输入的用于显示窗口内容的移动轨迹;修改html文件中对应于浏览器窗口内容的CSS代码，以浏览器打开所述窗口内容;修改CSS代码中窗口内容的配置数据，以显示窗口内容和浮动栏。解决了需要人工进行操作的问题。

【附图说明】

[0006]图1为一实施例中html文件实现显示浏览器窗口内容的方法的流程图。

[0007]图2为另一实施例中html文件实现显示浏览器窗口内容装置的模块框图。

[0008]图3为又一实施例中html文件实现显示浏览器窗口内容的装置系统框图。

【具体实施方式】

[0009]在本实施例中，术语窗口内容一般指代进入网页时的网页显示内容。浮动栏指代设置隐藏在网页侧边的内容。导航块指代浮动栏滑出状态下，设置在窗口内容上面的导航块。

[0010]请参照图1，html文件实现显示浏览器窗口内容的方法，该方法包括:

SlOl:配置浮动栏的第一属性数据和窗口内容的第二属性数据，以使该浮动栏处于隐藏状态，该窗口内容处于可运动状态；

在本实施例中，将窗口内容视为被一个div盒子包裹，浮动栏被另一个div盒子包裹，窗口内容和浮动栏共同被一个用于显示网页的窗口的宽度一致的div包裹。网页的文档结构中有一父节点，则该窗口内容、浮动栏和导航块均为该父节点的子节点。其中，在CSS源代码中，服务器后端中的关于该父节点和子节点的结构化代码示例如下:

其中，父节点(id=〃 op-wrap 〃的div)设置宽度为100%，使其与浏览器视口宽度一样，设置超出的为隐藏状态。[ΟΟ??] 需要说明的是，浮动栏(id=〃 ορ-aside"的div)设置为固定定位，浮动栏的right属性的数值为负的本身宽度值，层级设置为最高。假设浮动栏宽度为450px，该浮动栏的CSS代码如下:

服务器后端配置浮动栏的第一属性数据主要包括right属性的数据和位置属性的数据(posit1n)，在该实施例中，浮动栏的位置属性的值为fixed，该浮动栏的位置固定设置，该浮动栏宽度为450px，浮动栏的第一属性数据主要包括为(right:-450px; pos it 1n:fixed)，该浮动栏在网页中处于隐藏状态。

[0012]该窗口内容位于网页的左侧，并且位置为相对定位，处于可运动状态。

[0013]S102:读取用户的操作指令；

在步骤S102中，当网页所在为PC终端，则用户的操作指令具体可为通过鼠标滑动浮动栏，单次点击浮动栏、双击浮动栏、拖曳浮动栏或者全选浮动栏。当网页所在为移动终端或者平板电脑，则用户的操作指令具体还可以为触控点击，长按等操作。服务器通过读取用户的操作指令并进行识别，以根据用户的操作指令对程序代码中的关于窗口内容、浮动栏和导航块的代码中的数据进行更改，但不更改源代码。

[0014]S103:根据该输入的操作指令，更改该第一属性数据以使该浮动栏处于显示状态，并设置transit1n属性数据以使该浮动栏产生一预设方向的滑动效果，更改该窗口内容的第二属性数据，以使该窗口内容产生与该预设方向相反的滑动。

[0015]具体的，当用户触发相关的操作后，服务器后端利用javascript技术为窗口内容div、本体导航块div、浮动栏div的代码加上相应的class类名，以此，服务器后端将浮动栏的第一属性数据中的right属性的值更改为O，以使前端的浮动栏从隐藏状态更改为处于显示状态，并设置css3源代码中的transit1n属性数据，以使浮动栏产生从一个预设方向滑出的动画效果，在本实施例中，优选的为向右侧滑出，窗口内容的第二属性数据中的I eft属性的值更改为-450px，并设置transit1n属性，以使该窗口内容向左滑动与浮动栏宽度一致的距离，在本实施例中，该距离为-450px。

[0016]此外，在本实施例中，该方法还包括:配置导航块的第三属性数据，以使该导航块处于隐藏状态并固定定位;在更改该窗口内容的第二属性数据，以使该窗口内容产生与该预设方向相反的滑动的同时，更改该第三属性数据，以使该导航块处于显示状态，并设置transit1n属性数据以使该导航块为渐进显示的效果。

[0017]需要说明的是，导航块(id=〃op-mask 〃的div)设置为固定定位，宽度和高度都用CSS设置为100%，层级设置为-1，透明度为0，使得初始位于主体内容之下。

[0018]在窗口内容产生向左方向滑动的同时，服务器后端将导航块的opacity属性的值更改为I，该导航块从隐藏状态变为显示状态，并且z-1ndex属性的值更改为1000，使导航块覆盖窗口内容，且不覆盖浮动栏，同时设置css3的transit1n特效使得导航块的出现是一个渐现的过程。

[0019]在本实施例中，该方法还包括:接收用户点击该导航块这一操作指令;更改该第一属性数据、第二属性数据以及第三属性数据为初始值，以隐藏该浮动栏和导航块，该窗口内容向右滑动与该浮动栏宽度值一致的距离。

[0020]需要说明的是，当用户点击导航块后，服务器后端接收操作指令，并将相应的主体div、导航块div、浮动栏div中的代码去除相应的class类名，以将源代码中关于窗口内容、导航块、浮动栏的属性数据的值恢复为初始值，浮动栏重新回到隐藏状态，窗口内容滑动回原位，导航块回到隐藏状态。

[0021]在本实施例中，本发明的html文件实现显示浏览器窗口内容的方法包括配置浮动栏的第一属性数据和窗口内容的第二属性数据，以使所述浮动栏处于隐藏状态，所述窗口内容处于可运动状态;读取输入的操作指令;根据所述输入的操作指令，更改所述第一属性数据以使所述浮动栏处于显示状态，并设置transit1n属性数据以使所述浮动栏产生一预设方向的滑动效果，更改所述窗口内容的第二属性数据，以使所述窗口内容产生与所述预设方向相反的滑动。通过服务器接收操作指令后更改代码中相应的数据，以实现将隐藏的浮动栏变为显示，并使窗口内容和浮动