分栏的javascript代码

最新推荐文章于 2022-09-12 17:58:41 发布
最新推荐文章于 2022-09-12 17:58:41 发布
阅读量564 收藏
点赞数
文章标签： javascript microsoft generator button function input

index.htm页面代码
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>frame框架的显示隐藏操作</title>
</head>

<frameset name="full" rows="64,*,64">
  <frame name="top" scrolling="no" xnoresize target="contents" src="top.htm">
  <frameset cols="25%,*" name="cen">
    <frame name="contents" target="main" src="left.htm">
    <frame name="main" src="main.htm">
  </frameset>
  <frame name="bottom" scrolling="no" xnoresize target="contents" src="bottom.htm">
  <noframes>
  <body>

  <p>此网页使用了框架，但您的浏览器不支持框架。</p>

  </body>
  </noframes>
</frameset>
</html>


main.htm页面代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>main - 51windows.net</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function shtop(){
        if (parent.full.rows.indexOf("0,*,")!=-1){
                parent.full.rows="64,*,"+parent.full.rows.split(",")[2]
                document.getElementById("shtop").value="隐藏上部";
        }
        else{
                parent.full.rows="0,*,"+parent.full.rows.split(",")[2]
                document.getElementById("shtop").value="显示上部";
        }
}
function shleft(){
        if (parent.cen.cols=="0,*"){
                parent.cen.cols="25%,*,"
                document.getElementById("shleft").value="隐藏左部";
        }
        else{
                parent.cen.cols="0,*"
                document.getElementById("shleft").value="显示左部";
        }
}
function shbottom(){
        if (parent.full.rows.indexOf(",*,0")!=-1){
                parent.full.rows=parent.full.rows.split(",")[0]+",*,64"
                document.getElementById("shbottom").value="隐藏下部";
        }
        else{
                parent.full.rows=parent.full.rows.split(",")[0]+",*,0"
                document.getElementById("shbottom").value="显示下部";
        }
}
function maxmain(){
        if (parent.full.rows=="0,*,0"){
                parent.full.rows="64,*,64"
                parent.cen.cols="25%,*"
                document.getElementById("maxmain").value="隐藏左上下";
                document.getElementById("shtop").value="隐藏上部";
                document.getElementById("shleft").value="隐藏左部";
                document.getElementById("shbottom").value="隐藏下部";
        }
        else{
                parent.full.rows="0,*,0";
                parent.cen.cols="0,*";
                document.getElementById("maxmain").value="显示左上下";
                document.getElementById("shtop").value="显示上部";
                document.getElementById("shleft").value="显示左部";
                document.getElementById("shbottom").value="显示下部";
        }
}
//-->
</SCRIPT>
<input type="button" name="maxmain" id="maxmain" οnclick="maxmain();" value="隐藏左上下">
<input type="button" name="shtop" id="shtop" οnclick="shtop();" value="隐藏上部">
<input type="button" name="shleft" id="shleft" οnclick="shleft();" value="隐藏左部">
<input type="button" name="shbottom" id="shbottom" οnclick="shbottom();" value="隐藏下部">

</body>

</html>

weith2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
左右分栏特效代码下载
06-10
网站后台管理页面的左右分栏特效代码下载。
如何做分类导航栏菜单js
Confused to find
06-24 484
js代码：$(function() { // 导航菜单 var catelistsli = $(".fp-catelists").find("li"); // 菜单显示 var ptcatebox = $(".fp-catelistbox").find('.ptcatebox'); catelistsli.hover(function() { v
html页面分栏显示
11-16
采用非iframe形式，实现页面分栏效果
html自适应分栏,border-box实现自适应分栏布局(示例代码)
weixin_39742727的博客
07-03 323
简介这篇文章主要介绍了border-box实现自适应分栏布局(示例代码)以及相关的经验技巧，文章约1210字，浏览量245，点赞数4，值得参考！最近看些老东西，发觉ie下的盒模型用处还是挺大的content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&...
html设置三栏,html中如何将文字分三栏
weixin_42516710的博客
07-14 1988
在html中，可以利用css column属性来实现文字分栏效果，该属性可以指定某个元素应分为的列数和列的宽度，只需要给文字元素添加“columns:栏宽度 3;”即可将文字分三栏。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。html中将文字分三栏html中将文字分三栏#main {columns:100px 3;}当我年轻的时候，我梦想改变...
js 分栏效果实现代码
10-29
"JS分栏效果实现代码" 本篇文章主要讲解了如何使用JavaScript实现分栏效果，解决了分栏效果中遇到的一个常见的问题，即当拖动分割线经过iframe时，鼠标不听使唤的问题。本文中作者提供了一个小技巧来解决这个问题，...
一个精美的分栏特效特效代码
03-20
在描述中虽然没有具体信息，但我们可以推测这个代码可能是为开发者提供的一种现成的、可定制的分栏特效解决方案，可能是通过类库或者框架实现，例如Bootstrap、jQuery或者其他自定义的JavaScript插件。 标签中的...
fenlan.rar_分栏左lan
09-24
在上面的CSS代码中，`.container`使用了`display: flex;`，使得其子元素沿主轴（默认是水平方向）排列。`.left-column`和`.right-column`分别设置了宽度，从而实现了左右两栏的效果。 如果左侧栏和右侧栏需要不同的...
CSS分栏布局的方法:绝对定位和浮动
09-27
此外，如果需要在页面底部添加页脚，使用绝对定位可能需要预先知道各栏的高度，或者使用JavaScript进行动态调整，这增加了实现的复杂性。 接下来，我们来看浮动（Floating）。浮动最初是用来处理图文环绕的效果，但...
javascript_study:用CodeSandbox创建
04-05
首先，CodeSandbox提供了快速的项目启动环境，用户无需安装任何本地开发工具，只需一个浏览器就能开始编写和运行JavaScript代码。这对于初学者来说，降低了学习门槛，同时对于专业人士，它提供了一个方便的原型制作...
将窗体分隔成两个或多个部分_Vb窗体分栏效果.rar
07-10
又一个Vb6.0代码实现的窗体分栏功能，在一些流行的应用程序中，经常见到窗体上有二个相邻的列表框，可以用鼠标任意拉动中间分割条，改变列表框大校将窗体分隔成两个或多个部分，完成不同的功能，其实就是实现窗体分隔，有人说是分栏效果，不管怎么理解都行。源代码简单易理解，欢迎对窗体制作感兴趣的VB爱好者下载源码学习。
HTML页面模板（左右结构）
10-20
HTML页面模板（左右结构），商业化的标准模板
HTML使用iframe实现分栏
qq_45569406的博客
05-15 2512
算是记录自己写网页的一些小方法吧。省的之后写又忘了orz 大概效果如图： 分两部分，左边是导航栏，右边是相关信息。 代码 HTML部分 （注意代码只是图中样式部分的代码） <!--主界面--> <div id="middle"> <div id="catalogue"> <!--左半边--> <div id="catalogue-left">
php分两栏代码,css实现两栏布局的三种方法介绍（代码）
weixin_29467373的博客
03-11 219
本篇文章给大家带来的内容是关于css实现两栏布局的三种方法介绍(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、浮动布局左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。float: left;width: 200px;height: 200px;background: darkcyan}.two{ma...
html分栏左中右,CSS_css页面中常见左中右分栏布局的两种实现方式，以下代码复制粘贴即可使用： - phpStudy...
weixin_30724201的博客
07-16 886
css页面中常见左中右分栏布局的两种实现方式以下代码复制粘贴即可使用：示例一：复制代码代码如下:.page_center {width:100%;}#nav {background-color:red;height:20px;}#left {width:120px;background-color:green;position:absolute;}#middle {background-color...
HTML完整格式–什么是HTML完整格式？
culing2941的博客
09-15 818
HTML full form is Hyper Text Markup Language. HTML is used to describe structure of web pages. HTML完整格式是超文本标记语言 。 HTML用于描述网页的结构。 HTML was developed by Tim Berners-Lee in the late 1991. It was releas...
案例五---页面分栏（使用语义化标签）
Flora_hsx的博客
09-12 303
熟悉页面分栏设置以及H5新增语义化标签使用。
HTML语言分栏左右比例怎么调整,html自适应页面上下左右分栏的处理技巧
weixin_42530793的博客
06-01 963
html自适应页面上下左右分栏的效果可以借用CSS或者jQuery进行处理。CSS中的width和height属性的值带%的情况：height:100% 代表基于包含它的块级对象(即父元素)的百分比高度，此时为100%。width:100% 代表基于包含它的块级对象(即父元素)的百分比宽度，此时为100%。使某元素(例如id为container的元素)占据整个页面的全部时的CSS代码如下：#con...
分栏布局
m0_55832273的博客
04-06 159
将盒子分为若干栏，是垂直上下划分的，每一栏的宽度相等，效果与报纸差不多。 1.column-count：数值； 指定分栏的数量。 例： .box { column-count: 5; } 2.column-width：数值px； 指定分栏的宽度。 例： .box { /* column-count: 5; */ column-width: 400px; } 【注意】column-count与column-width不要同时使用。如果同时使用，则column-w
node.js实现分栏功能
最新发布
05-23
接下来，我们需要使用 JavaScript 实现分栏的滚动联动效果。具体做法是监听每个栏目的滚动事件，当一个栏目滚动时，其他栏目也跟随滚动。代码如下： ```javascript var columns = document.querySelectorAll('....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值