现在的位置: 首页 > 综合 > 正文

一段保留滚动状态的js代码

2013年01月19日 ⁄ 综合 ⁄ 共 6166字 ⁄ 字号 评论关闭

<!--

writed by sll

updated by northsnow

-->

<script language='javascript'>
  var PatInt=/^/d+$/;           //验证整数数字

/**
 *   去左右空格函数
 *  参数 str 是一字符串
 *  返回 去左右空格的字符串
 */
function _trim(str)
{
    var ss=""+str
 return (_ltrim(_rtrim(ss)));
}

/**
 *   去左空格函数
 *  参数 str 是一字符串
 *  返回 去左空格的字符串
 *
 */
function _ltrim(str)
{
    var ss=""+str;
    if(ss.length==0)
 return (ss);
    if(ss.charAt(0)==' ')
 ss=_ltrim(ss.substring(1,ss.length));
    return (ss);
}

/**
 *  去右空格函数
 *  参数 str 是一字符串
 *  返回 去右空格的字符串
 *
 */
function _rtrim(str)
{
    var ss=""+str;
    if(ss.length==0)
 return (ss);
    if(ss.charAt(ss.length-1)==' ')
 ss=_rtrim(ss.substring(0,ss.length-1));
    return (ss);
}
/**
 *
 * 函数功能: 验证输入的字符串是否为空
 * 参数说明:  需要进行验证的字符串
 * 返 回 值:  true或false
 *       true: 输入的字符串不为空
 *             false:输入的字符串为空
 */

function checkSpace(str)
{
    if(_trim(str)=="")
 return false
    else
 return true
}

//用于保存/恢复滚动条的位置
//begin

//滚动条滚动时调用,用来读取页面中各滚动条的当前位置
//objDiv  当前的滚动条所属对象
//strInputName  保存 滚动条滚动状态的文本域的名字
//strInputName中数据存储规则:
//<对象1的id>:对象1的scrollLeft,对象1的scrollTop_<对象1的id>:对象2的scrollLeft,对象2的scrollTop_……<对象n的id>:对象n的scrollLeft,对象n的scrollTop
function _div_onscroll(objDiv,strInputName)
{
    var objInput=document.getElementById(strInputName);
    var m_div_p = '';
    if(!objInput) return false;
    m_div_p=objInput.value;
    var strCurrent="<" + objDiv.id + ">:" + objDiv.scrollLeft + "," + objDiv.scrollTop;  
    if(m_div_p=='')
    {
        m_div_p=strCurrent;
    }  
 else
 {         
    if(m_div_p.indexOf("<" + objDiv.id + ">:")==-1)
    {  //alert(m_div_p);
        m_div_p=m_div_p.concat("_" + strCurrent);
  }
  else
  {
     patTemp=eval('/<' + objDiv.id + '>://d+' + "," + '//d+/g');
     m_div_p=m_div_p.replace(patTemp,strCurrent);
     document.getElementById("lis").value=m_div_p;
  }
 }           
    objInput.value = m_div_p;
}

//页面onload时调用,用来恢复滚动条的原位置
//strInputName  保存 滚动条滚动状态的文本域的名字
function _resume_scroll(strInputName)
{
    var objInput=document.getElementById(strInputName);
    var m_div_p = '';
    if(!objInput)  return false;   
    if(arguments.length<=1) return false;
    var argCount=arguments.length;
    m_div_p=objInput.value;
    if(m_div_p=='') m_div_p=div_p_fromCookie()
    if(m_div_p=='')return false;
    var objDiv;
    var strT1='';
    var strT2='';
    var strT3='';
    for(var i=1;i<argCount;i++)
    {
        if(!checkSpace(arguments[i])) continue;
        objDiv=document.getElementById(arguments[i]);
        if(!objDiv) continue;
   
  strT1="<" + arguments[i] + ">:";
  if(m_div_p.indexOf(strT1)==-1) continue;

  strT2=m_div_p.substring(m_div_p.indexOf(strT1) + strT1.length);
  if(strT2.indexOf("_")!=-1) strT2=strT2.substring(0,strT2.indexOf("_"));
     
  if(strT2.indexOf(",")!=-1)
  {
     strT3=strT2.substring(0,strT2.indexOf(","));
     if(PatInt.test(strT3))
     {
        if(parseInt(strT3)>0) objDiv.scrollLeft=parseInt(strT3);
     }
     strT3=strT2.substring(strT2.indexOf(",")+1)
     if(PatInt.test(strT3))
     {
        if(parseInt(strT3)>0) objDiv.scrollTop=parseInt(strT3);
     }
        }
    }
}

//将滚动条位置保存到cookie,一般是在首次进入刷新时保证能够实现自动滚动到指定位置
//div_p_fromReq  通过request获得提交过来的位置信息
//div_p_fromFrm  从表单中直接获得的位置信息
function div_p_toCookie(div_p_fromReq,div_p_fromFrm)
 {
      if(div_p_fromReq==''&&div_p_fromFrm!='')
      {
         var expiresTime=new Date();
         expiresTime.setTime(expiresTime.getTime() + 3000);//保存3秒钟
         document.cookie="cookie_div_p=" + escape(div_p_fromFrm) + ";expires=" + expiresTime.toGMTString();
      }
 }

//从cookie中读取位置信息
function div_p_fromCookie()
 {
      var strCookie=unescape(document.cookie);
      var strTT="cookie_div_p=";
      if(strCookie.indexOf(strTT)==-1) return ("");
      var strT1=strCookie.substring(strCookie.indexOf(strTT) + strTT.length)
      var strT2=strT1.substring(0,strT1.indexOf(";"))
      return strT2;
 }

//end
</script>

<div id="div0" onscroll="javascript:_div_onscroll(this,'div_p')"  style="OVERFLOW:auto; WIDTH: 210px;height:340px" >
   <table  width="600" height="300">
                <TR>
                    <TD class=p12>
                      傻女婿<BR><BR>从前有个傻女婿。<BR>有一天他岳父要来拜访,父亲刚好要出远门,不放心,所以就教他,<BR>如果你岳父问你:"这些院子的牛马是怎麽照顾的,长得这麽好。"<BR>你就说:"小小畜牲何必介意!"<BR>如果他问你:"家中事业是谁在管理的?"<BR>你就说:"小婿无能父亲掌管!"<BR>如果问起墙上那幅画,就说:"这是唐伯虎名画。"<BR>还叫他覆颂了一遍,才放心离开。<BR>当他岳父来了,一见他就问:&nbsp;"你父亲呢?"<BR>答道:&nbsp;"小小畜牲何必介意!!"<BR>他岳父一听,心想不对,又问:&nbsp;"那我女儿呢?"<BR>答道:&nbsp;"小婿无能,父亲掌管。"<BR>他岳父一听,大为生气,便喝叱道:&nbsp;"你说的是啥麽话?"<BR>他一听很高兴,很有自信的说:&nbsp;"这是唐伯虎名画!!"<BR></FONT>
                 
                      有一名贵妇养了一只母鹦鹉,<BR>但这只鹦鹉只会说:「来ㄚ!要不要爽一下ㄚ......」<BR>贵妇觉的这鹦鹉的行为实在有辱她的身份<BR>有日贵妇看到对面教堂的神父也养了一只公鹦鹉,而且很乖的在笼子里祷告<BR>於是便去请教神父:「为何你的鹦鹉那麽乖?养多久啦?<BR>我把我家的鹦鹉给你调教好吗?」<BR>神父:「我养两年啦,它ㄧ直都很乖,你的鹦鹉怎麽啦?」<BR>於是贵妇便把家里那只说话低贱的鹦鹉的情形ㄧ五一十地说给神父听<BR>神父ㄧ口答应:「好ㄚ,你把你的鹦鹉给我养,我保证它会和我的鹦鹉ㄧ样,<BR>乖乖地在笼里祷告。」<BR>隔日,贵妇把鹦鹉送给神父,神父便把母鹦鹉关在与神父的公鹦鹉同一个笼子,<BR>希望能以近朱者赤的方法把母鹦鹉教化<BR>未料,只见母鹦鹉一看见公鹦鹉便叫著:「来ㄚ!要不要爽一下ㄚ......」<BR>只见正在祷告的公鹦鹉眼睛为之一亮:「神ㄚ,我祷告两年的愿望终於实现啦......<BR>.?<BR>
            </td>
        </tr>
   </table>
  </div>
  <div id="div1" onscroll="javascript:_div_onscroll(this,'div_p')"  style="OVERFLOW:auto; WIDTH: 210px;height:340px" >
   <table  width="600" height="300">
                <TR>
                    <TD class=p12>
                      傻女婿<BR><BR>从前有个傻女婿。<BR>有一天他岳父要来拜访,父亲刚好要出远门,不放心,所以就教他,<BR>如果你岳父问你:"这些院子的牛马是怎麽照顾的,长得这麽好。"<BR>你就说:"小小畜牲何必介意!"<BR>如果他问你:"家中事业是谁在管理的?"<BR>你就说:"小婿无能父亲掌管!"<BR>如果问起墙上那幅画,就说:"这是唐伯虎名画。"<BR>还叫他覆颂了一遍,才放心离开。<BR>当他岳父来了,一见他就问:&nbsp;"你父亲呢?"<BR>答道:&nbsp;"小小畜牲何必介意!!"<BR>他岳父一听,心想不对,又问:&nbsp;"那我女儿呢?"<BR>答道:&nbsp;"小婿无能,父亲掌管。"<BR>他岳父一听,大为生气,便喝叱道:&nbsp;"你说的是啥麽话?"<BR>他一听很高兴,很有自信的说:&nbsp;"这是唐伯虎名画!!"<BR></FONT>
                 
                      有一名贵妇养了一只母鹦鹉,<BR>但这只鹦鹉只会说:「来ㄚ!要不要爽一下ㄚ......」<BR>贵妇觉的这鹦鹉的行为实在有辱她的身份<BR>有日贵妇看到对面教堂的神父也养了一只公鹦鹉,而且很乖的在笼子里祷告<BR>於是便去请教神父:「为何你的鹦鹉那麽乖?养多久啦?<BR>我把我家的鹦鹉给你调教好吗?」<BR>神父:「我养两年啦,它ㄧ直都很乖,你的鹦鹉怎麽啦?」<BR>於是贵妇便把家里那只说话低贱的鹦鹉的情形ㄧ五一十地说给神父听<BR>神父ㄧ口答应:「好ㄚ,你把你的鹦鹉给我养,我保证它会和我的鹦鹉ㄧ样,<BR>乖乖地在笼里祷告。」<BR>隔日,贵妇把鹦鹉送给神父,神父便把母鹦鹉关在与神父的公鹦鹉同一个笼子,<BR>希望能以近朱者赤的方法把母鹦鹉教化<BR>未料,只见母鹦鹉一看见公鹦鹉便叫著:「来ㄚ!要不要爽一下ㄚ......」<BR>只见正在祷告的公鹦鹉眼睛为之一亮:「神ㄚ,我祷告两年的愿望终於实现啦......<BR>.?<BR>
            </td>
        </tr>
   </table>
  </div>

< %
  div_p=trim(request.form("div_p"))
% >

<form name="frmHidden" method="post" action="#">
 <input type="hidden" id="div_p" name="div_p" value="<%=div_p%>">
</form>

<script language="javascript" event="onload" for="window">
    _resume_scroll("div_p","div0","div1","div9");
</script>
<script language="javascript" event="onunload" for="window">
   div_p_toCookie('<%=div_p%>',document.getElementById("div_p").value)
 
</script>

更多文章,请访问 NorthSnow Home

抱歉!评论已关闭.