页面滚动条

于 2005-09-11 22:42:00 发布
阅读量926 收藏
点赞数
分类专栏： 学习心得 文章标签： class function button stylesheet div input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichd_lcs/article/details/477712
版权

<HTML>
<HEAD>
<TITLE>可拖动的图层</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="../css/site.css">
<script language=JavaScript>
<!--
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</script>
<script type=text/javascript>
<!--
// Power By http://www.1studio.net/
// Mailto:1studio@sina.com

var ie5 = (document.all && document.getElementsByTagName);
var step = 0;
function setSB(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
inforEl.innerText = message;
}
}
function setSBByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
step = step + v;
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = step + "%";
valueEl.innerText = step + "%"
inforEl.innerText = message;
}
}

function fakeProgress(v, el) {
if (v >= 101)
location.href="0108.htm";   //跳转的URL地址
else {
setSB(v, el, infor, " 欢迎访问 壹号工作室 http://www.1studio.net 页面正在加载中……");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 20);
}
}

//-->
</script>
</HEAD>
<BODY  bgcolor="#000000" leftmargin="0" topmargin="0" οnlοad=fakeProgress(0,sb)>
<br>
<br>
<br>
<br><DIV align=center>
<DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #00CCFF; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left">
<DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px">
<DIV style="BACKGROUND: #000000; WIDTH: 100%" hidden overflow: height:12px;></DIV></DIV>
<DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
<P></P>
<DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
<br>
<br>
<br>
<br>
<br>
<table cellspacing=0 cellpadding=0 width=600 border=0 align="center">
  <tr bgcolor=#7285cf>
    <td width=10 height=18>&nbsp;</td>
    <td  class="white" width=590 bgcolor=#7285cf height=18>页面载入条</td>
  </tr>
  <tr bgcolor=F2F2F2>
    <td width=10>　</td>
    <td class=row width=590 bgcolor="F2F2F2">前面也介绍过几种进入页面时的载入条，这里介绍的这个是一个无需任何图片制作出来的载入条。效果很精美<br>
      更适合于深色页面内的放入：<br>
      <span class="blue"> 为了让大家能联连贯地看学好下面的步骤，所以此实例载入后的页面还是原页面。</span></td>
  </tr>
  <tbody>
  <tr bgcolor=F2F2F2 valign="top">
    <td>&nbsp;</td>
    <td>&nbsp; </td>
  </tr>
  </tbody>
</table>
<br>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr bgcolor="7285CF" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" bgcolor="7285CF" colspan="3" class="white">制作方法</td>
  </tr>
  <tr bgcolor="#E7E7E7" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" width="35"><img src="../image/number1.gif" width="21" height="21">
    </td>
    <td height="18" width="369">将下面的代码复制到&lt;head&gt;~&lt;/head&gt;里</td>
    <td height="18" width="188">
      <input onClick="JM_cc('js_1')" type=button value=复制到我的剪贴板 name=Button class="bottom">
    </td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8" bgcolor="F2F2F2">&nbsp;</td>
    <td height="18" align="center" bgcolor="F2F2F2" colspan="3">
      <textarea name=js_1 rows=10 wrap=VIRTUAL cols=80 class="editbox2">&lt;script type=text/javascript&gt;
&lt;!--
// Power By http://www.1studio.net/
// Mailto:1studio@sina.com

var ie5 = (document.all && document.getElementsByTagName);
var step = 0;
function setSB(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth &gt; 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
inforEl.innerText = message;
}
}
function setSBByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
step = step + v;
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth &gt; 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = step + "%";
valueEl.innerText = step + "%"
inforEl.innerText = message;
}
}

function fakeProgress(v, el) {
if (v &gt;= 101)
location.href="http://www.1studio.net/";
else {
setSB(v, el, infor, " 欢迎访问 壹号工作室 http://www.1studio.net 页面正在加载中……");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 20);
}
}

//--&gt;
&lt;/script&gt;</textarea>
    </td>
  </tr>
  <tr bgcolor="#E7E7E7" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" width="35"><img src="../image/number2.gif" width="21" height="21"></td>
    <td height="18" width="369">将下面的代码复制到&lt;body&gt;里</td>
    <td height="18" width="188">
      <input onClick="JM_cc('js_2')" type=button value=复制到我的剪贴板 name=Button class="bottom">
    </td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8" bgcolor="F2F2F2">&nbsp;</td>
    <td height="18" align="center" bgcolor="F2F2F2" colspan="3">
      <textarea name=js_2 rows=4 wrap=VIRTUAL cols=80 class="editbox2">&ltBODY οnlοad=fakeProgress(0,sb)&gt;</textarea>
    </td>
  </tr>
  <tr bgcolor="#E7E7E7" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" width="35"><img src="../image/number3.gif" width="21" height="21"></td>
    <td height="18" width="369">将下面的代码复制到&lt;body&gt;~&lt;/body&gt;里</td>
    <td height="18" width="188">
      <input onClick="JM_cc('js_3')" type=button value=复制到我的剪贴板 name=Button class="bottom">
    </td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8" bgcolor="F2F2F2">&nbsp;</td>
    <td height="18" align="center" bgcolor="F2F2F2" colspan="3">
      <textarea name=js_3 rows=10 wrap=VIRTUAL cols=80 class="editbox2">&lt;DIV align=center&gt;
&lt;DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #00CCFF; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left"&gt;
&lt;DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px"&gt;
&lt;DIV style="BACKGROUND: #000000; WIDTH: 100%" hidden overflow: height:12px;&gt;&lt;/DIV&gt;&lt;/DIV&gt;
&lt;DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"&gt;&lt;/DIV&gt;&lt;/DIV&gt;
&lt;P&gt;&lt;/P&gt;
&lt;DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"&gt;&lt;/DIV&gt;&lt;/DIV&gt;</textarea>
    </td>
  </tr>
  <tr bgcolor="#E7E7E7" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" width="35">&nbsp;</td>
    <td height="18" width="369" class="red">实例注释：</td>
    <td height="18" width="188">&nbsp;</td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8" bgcolor="F2F2F2">&nbsp;</td>
    <td height="30" bgcolor="F2F2F2" colspan="3" class="row"><b><span class="blue">定义载入条属性：</span></b><br>
      &lt;DIV id=sb <br>
      style=&quot;<span class="c990000">BORDER-RIGHT: #ffffff 1px solid</span>;
      　　<span class="green">// 右边框边及宽度</span><br>
      <span class="c990000">BORDER-TOP: #ffffff 1px solid</span>; 　　　　　　<span class="green">//
      顶边框边及宽度</span><br>
      <span class="c990000">BACKGROUND: #00CCFF</span>; 　　　　　　　　　<span class="green">//
      背景色</span><br>
      <span class="c990000">WIDTH: 400px</span>; 　　　　　　　　　　　　　<span class="green">//
      图层宽度</span><br>
      <span class="c990000">BORDER-BOTTOM: #cccccc 1px solid; </span> 　　　<span class="green">//
      底边框边及宽度</span><br>
      <span class="c990000">HEIGHT: 14px; </span> 　　　　　　　　　　　　　<span class="green">//
      高度</span><br>
      TEXT-ALIGN: left&quot;&gt;<br>
    </td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8" bgcolor="#E7E7E7">&nbsp;</td>
    <td height="18" bgcolor="#E7E7E7" colspan="3">至此你就可以完成这个实例了，快去试试吧！ </td>
  </tr>
  <tr bgcolor="7285CF" >
    <td height="18" width="8">&nbsp;</td>
    <td height="18" colspan="3">&nbsp;</td>
  </tr>
</table>
</BODY></HTML>

lichd_lcs
关注
专栏目录
Asp.net保持页面滚动条位置(页面提交后不变)
10-27
在ASP.NET开发中，有时候我们需要在用户交互后（如表单提交）保持页面或特定区域（如div）的滚动条位置不变，以提供更好的用户体验。这个问题的解决方案通常涉及到JavaScript和服务器端代码的协同工作。以下是如何在...
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
然而，这种方式在遇到滚动条时会出现一个问题，即页面内容在滚动条出现和消失时发生跳动，影响用户体验。这是因为滚动条的出现会占据页面的可用宽度，导致原本居中的内容发生偏移。 为了解决这个问题，通常有两种...
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...
微信小程序设置滚动条过程详解
10-16
在微信小程序开发中，有时我们需要为页面或组件添加滚动条以增强用户体验，特别是在内容过多无法完全展示时。本文将详细讲解如何在微信小程序中设置滚动条，并通过具体的代码示例来帮助开发者理解这一过程。 首先，...
js脚本调试工具
02-16 1761
js脚本调试工具microsoft script editormicrosoft script debugger http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=enmicrosft vistual studio  Venkman, M
String用法
04-13 1719
正确使用String类的几点注意    java.lang.String类对大家来说最熟悉不过了，我们写java程序很少能不用String的。本文讲述如何正确的使用String，内容主要涉及初始化、串联和比较等操作。     首先我们必须清楚的一点是String类是final类型的，因此你不可以继承这个类、不能修改这个类。我们使用String的时候非常简单，通常都是String s = "hell
java编码规范
04-07 1329
  Java语言编码规范(Java Code Conventions)　名称Java语言编码规范(Java Code Conventions)　译者晨光（Morning）　简介本文档讲述了Java语言的编码规范，较之陈世忠先生《c++编码规范》的浩繁详尽，此文当属短小精悍了。而其中所列之各项条款，从编码风格，到注意事项，不单只Java，对于其他语言，也都很有借鉴意义。因为简短，所以易记，大家不妨将
jsp标签中的script解析
08-31 1265
发现一个问题">FF.isQuery()是个boolean变量，中间的script的代码不能被解析必须使用style=""形式才能解析，不知道是jsp的问题还是其他问题
数据库NULL值
01-10 1192
NULL 使用详解软件环境： 1、Windows NT4.0+ORACLE 8.0.42、ORACLE安装路径为：C:/ORANT含义解释： 问：什么是NULL？答：在我们不知道具体有什么数据的时候，也即未知，可以用NULL，我们称它为空，ORACLE中，含有空值的表列长度为零。ORACLE允许任何一种数据类型的字段为空，除了以下两种情况：1、主键字段（
GB码转换成UTF
01-24 1160
    很早以前找到一个把GB码转化为UTF-8的函数，配合一个GB到UNICODE的对照表（gb2312.txt），用于在GD中输出汉字。后来发现在欲输出的内容中含有西文字符时，会出现混乱。后来找到了修改后的代码，解决了问题。现将两个函数做一对比分析如下。首先，这是一个UNICODE到UTF-8编码转换的函数，这一部分修改前后没有变化：function u2utf8($c){for($i=0;$
DB2命令
02-01 1132
一、常用命令 　　1. 建立数据库DB2_GCB 　　CREATE DATABASE DB2_GCB ON G: ALIAS DB2_GCB 　　USING CODESET GBK TERRITORY CN COLLATE USING SYSTEM DFT_EXTENT_SZ 32 　　2. 连接数据库 　　connect to sample1 user db2admin using 830120
设计模式
04-08 1131
1、FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：如何创建及如何向客户
常用javascript
06-16 937
//来源：网络事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值
汉字编码笔记(转载)
01-24 847
Java中文处理学习笔记——Hello Unicode作者： 车东 Email: chedongATbigfoot.com/chedongATchedong.com版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明http://www.chedong.com/tech/hello_unicode.html关键词：linux java mutlibyte
运算符优先级
02-24 796
运算符描述. [] ()字段访问、数组下标、函数调用以及表达式分组++ -- - ~ ! delete new typeof void一元运算符、返回数据类型、对象创建、未定义值* / %乘法、除法、取模+ - +加法、减法、字符串连接> >>>移位 >= instanceof小于、小于等于、大于、大于等于、i
正则表达式
06-14 775
正则表达式使用详解 (php,perl,unix,javascript)正则表达式使用详解  如果我们问那些UNIX系统的爱好者他们最喜欢什么，答案除了稳定的系统和可以远程启动之外，十有八九的人会提到正则表达式；如果我们再问他们最头痛的是什么，可能除了复杂的进程控制和安装过程之外，还会是正则表达式。那么正则表达式到底是什么？如何才能真正的掌握正则表达式并正确的加以灵活运用？本文将就此展开介绍，希望
HTML [bug]
12-21 734
当只有一个文本输入框时候,按回车键会默认提交到当前页面(如果设置form的action动作的话，会提交到指定的action)当出现两个或两个以上文本输入框就不会有这个现象另外当页面上有submit按钮时候,按回车键也会默认提交,不管页面上有多少文本输入框
使用cookie实现页面滚动条位置记忆
"本文将探讨如何在页面加载时从cookie中获取滚动条位置信息，以便在用户再次访问时恢复滚动位置，实现更好的用户体验。我们将讨论两种情况：整体浏览器滚动条和特定div或table滚动条的处理方法。" 在Web开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值