60、大量文字的拖动处理

60、大量文字的拖动处理

脚本说明:

把如下代码加入<body>区域中

<SCRIPT language=javascript>

 

var upH = 17;

var upW = 15;

var downH = 17;

var downW = 15;

var dragH = 27;

var dragW = 17;

var scrollH = 90;

var speed =15;

 

 

 

 

var dom = document.getElementById ? true:false;

var nn4 = document.layers ? true:false;

var ie4 = document.all ? true:false;

 

var mouseY;

var mouseX;

 

var clickUp = false;

var clickDown = false;

var clickDrag = false;

var clickAbove = false;

var clickBelow = false;

 

var timer = setTimeout("",500);

var upL;

var upT;

var downL;

var downT;

var dragL;

var dragT;

var rulerL;

var rulerT;

var contentT;

var contentH;

var contentClipH;

var scrollLength;

var startY;

 

 

function down(e){

       if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton         

       getMouse(e);

       startY = (mouseY - dragT);

      

 

       if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){

              clickUp = true;

              return scrollUp();

       }    

 

       else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){

              clickDown = true;

              return scrollDown();

       }

 

       else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){

              clickDrag = true;

              return false;

       }

       else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){

 

              if(mouseY < dragT){

                     clickAbove = true;

                     clickUp = true;

                     return scrollUp();

              }

      

              else{

                     clickBelow = true;

                     clickDown = true;

                     return scrollDown();

              }

       }

 

       else{

              return true;

       }

}

 

 

function move(e){

       if(clickDrag && contentH > contentClipH){

              getMouse(e);

              dragT = (mouseY - startY);

             

              if(dragT < (rulerT))

                     dragT = rulerT;            

              if(dragT > (rulerT + scrollH - dragH))

                     dragT = (rulerT + scrollH - dragH);

             

              contentT = ((dragT - rulerT)*(1/scrollLength));

              contentT = eval('-' + contentT);

 

              moveTo();

       }

 

       if(ie4)

              return false;

}

 

function up(){

       clearTimeout(timer);

 

       clickUp = false;

       clickDown = false;

       clickDrag = false;

       clickAbove = false;

       clickBelow = false;

       return true;

}

 

 

function getT(){

       if(ie4)

              contentT = document.all.content.style.pixelTop;

       else if(nn4)

              contentT = document.contentClip.document.content.top;

       else if(dom)

              contentT = parseInt(document.getElementById("content").style.top);

}

 

 

function getMouse(e){

       if(ie4){

              mouseY = event.clientY;

              mouseX = event.clientX;

       }

       else if(nn4 || dom){

              mouseY = e.pageY;

              mouseX = e.pageX;

       }

}

 

 

function moveTo(){

       if(ie4){

              document.all.content.style.top = contentT;

              document.all.ruler.style.top = dragT;

              document.all.drag.style.top = dragT;

       }

       else if(nn4){

              document.contentClip.document.content.top = contentT;

              document.ruler.top = dragT;

              document.drag.top = dragT;

       }

       else if(dom){

              document.getElementById("content").style.top = contentT + "px";

              document.getElementById("drag").style.top = dragT + "px";

              document.getElementById("ruler").style.top = dragT + "px";

       }

}

 

 

function scrollUp(){

       getT();

      

       if(clickAbove){

              if(dragT <= (mouseY-(dragH/2)))

                     return up();

       }

      

       if(clickUp){

              if(contentT < 0){          

                     dragT = dragT - (speed*scrollLength);

                    

                     if(dragT < (rulerT))

                            dragT = rulerT;

                           

                     contentT = contentT + speed;

                     if(contentT > 0)

                            contentT = 0;

                    

                     moveTo();

                     timer = setTimeout("scrollUp()",25);

              }

       }

       return false;

}

 

 

function scrollDown(){

       getT();

      

       if(clickBelow){

              if(dragT >= (mouseY-(dragH/2)))

                     return up();

       }

 

       if(clickDown){

              if(contentT > -(contentH - contentClipH)){               

                     dragT = dragT + (speed*scrollLength);

                     if(dragT > (rulerT + scrollH - dragH))

                            dragT = (rulerT + scrollH - dragH);

                    

                     contentT = contentT - speed;

                     if(contentT < -(contentH - contentClipH))

                            contentT = -(contentH - contentClipH);

                    

                     moveTo();

                     timer = setTimeout("scrollDown()",25);

              }

       }

       return false;

}

 

 

function reloadPage(){

       location.reload();

}

 

 

function eventLoader(){

       if(ie4){

      

              upL = document.all.up.style.pixelLeft;

              upT = document.all.up.style.pixelTop;        

 

              downL = document.all.down.style.pixelLeft;

              downT = document.all.down.style.pixelTop;

             

              dragL = document.all.drag.style.pixelLeft;

              dragT = document.all.drag.style.pixelTop;          

 

              rulerT = document.all.ruler.style.pixelTop;         

 

              contentH = document.all.content.offsetHeight;

              contentClipH = document.all.contentClip.offsetHeight;

       }

       else if(nn4){

      

              upL = document.up.left;

              upT = document.up.top;       

 

              downL = document.down.left;

              downT = document.down.top;            

 

              dragL = document.drag.left;

              dragT = document.drag.top;        

             

              rulerT = document.ruler.top;

      

              contentH = document.contentClip.document.content.clip.bottom;

              contentClipH = document.contentClip.clip.bottom;

       }

       else if(dom){

      

              upL = parseInt(document.getElementById("up").style.left);

              upT = parseInt(document.getElementById("up").style.top);

             

              downL = parseInt(document.getElementById("down").style.left);

              downT = parseInt(document.getElementById("down").style.top);

      

              dragL = parseInt(document.getElementById("drag").style.left);

              dragT = parseInt(document.getElementById("drag").style.top);

      

              rulerT = parseInt(document.getElementById("ruler").style.top);

 

              contentH = document.getElementById("content").offsetHeight;

              contentClipH = document.getElementById("contentClip").offsetHeight;

              document.getElementById("content").style.top = 0 + "px";

             

       }

      

       scrollLength = ((scrollH-dragH)/(contentH-contentClipH));

 

       if(nn4){

              document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

              window.onresize = reloadPage;

       }

       document.onmousedown = down;

       document.onmousemove = move;

       document.onmouseup = up;

}

 

</SCRIPT>

 

<STYLE type=text/css>#body {

       HEIGHT: 100%; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%

}

#content {

       LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible

}

A:hover {

       FONT-SIZE: 9pt; TEXT-DECORATION: underline

}

A:link {

       FONT-SIZE: 9pt; TEXT-DECORATION: none; 000000;: "宋体"

}

A:visited {

       COLOR: #666666; FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; TEXT-DECORATION: none

}

TD {

       FONT-FAMILY: "宋体"; FONT-SIZE: 9pt

}

.90E {

       COLOR: #000000; FONT-FAMILY: "arial"; FONT-SIZE: 9pt

}

.txtfield {

       BACKGROUND-COLOR: #ccffcc; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-FAMILY: "宋体"; FONT-SIZE: 9pt

}

#scroll {

       HEIGHT: 351px; LEFT: 180px; POSITION: absolute; TOP: 1px; VISIBILITY: visible; WIDTH: 17px

}

</STYLE>

<BODY aLink=#616161 bgColor=#ebece0 link=#616161 onload=eventLoader();

text=#616161 topMargin=9 vLink=#616161 marginwidth="10" marginheight="9">

<DIV id=up

style="HEIGHT: 15px; LEFT: 161px; POSITION: absolute; TOP: 2px; VISIBILITY: visible; WIDTH: 17px; Z-INDEX: 1"><IMG

height=20 src="up.gif" width=13></DIV>

<DIV id=down

style="HEIGHT: 15px; LEFT: 161px; POSITION: absolute; TOP: 112px; VISIBILITY: visible; WIDTH: 17px; Z-INDEX: 2"><IMG

height=20 src="down.gif" width=13></DIV>

<DIV id=drag

style="HEIGHT: 27px; LEFT: 161px; POSITION: absolute; TOP: 23px; VISIBILITY: visible; WIDTH: 7px; Z-INDEX: 5"><IMG

height=25 src="scroller.gif" width=13></DIV>

<DIV id=ruler

style="HEIGHT: 27px; LEFT: 161px; POSITION: absolute; TOP: 23px; VISIBILITY: visible; WIDTH: 17px; Z-INDEX: 6"></DIV>

<DIV id=contentClip

style="CLIP: rect(0px 750px 345px 0px); HEIGHT: 133px; LEFT: 1px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 163px; Z-INDEX: 7">

<DIV id=content style="HEIGHT: 100px; LEFT: -9px; TOP: 1px; WIDTH: 170px">

<DIV align=left>

<TABLE border=0 borderColor=#99cc00 cellPadding=0 cellSpacing=4 width="100%">

  <TBODY>

  <TR>

    <TD bgColor=#ffffff width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>酒店开展"优质服务月"活动</FONT> </TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>南洋海景酒店阿里山俱乐部</FONT> </TD></TR>

  <TR>

    <TD bgColor=#ffffff width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>南洋海景酒店试营业新闻发布会 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>网络化商务酒店的先锋--珠海南洋海景酒店 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>网络化商务酒店的先锋--珠海南洋海景酒店 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>网络化商务酒店的先锋--珠海南洋海景酒店 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>南洋海景酒店试营业新闻发布会 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>酒店开展"优质服务月"活动</FONT> </TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>南洋海景酒店试营业新闻发布会 </FONT></TD></TR>

  <TR>

    <TD width="4%"> </TD>

    <TD width="96%"><FONT color=#000000>南洋海景酒店试营业新闻发布会 </FONT></TD></TR>

  <TR>

    <TD height=13 width="4%"> </TD>

    <TD align=right height=13 width="96%"><FONT color=#000000><IMG height=9

      src="more.gif" width=20><FONT

    color=#ff6600>更多信息</FONT></FONT></TD></TR></TBODY></TABLE>

<P> </P></DIV></DIV></DIV>

 

Write a comment

Comments: 0