熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

模擬滾動條

2013-11-15 11:57:20  來源: JSP教程 

  <html>

<head> <title>網頁特效|wwwwangqicom|模擬滾動條</title> <meta httpequiv="ContentType" content="text/html; charset=gb">   <STYLE type=text/css> #scrollerContent {POSITION: absolute} body {fontsize:pt;color:#;textdecoration: none} </STYLE> <script> var upH = ;//向上的箭頭的高度 var upW = ; //向上的箭頭的寬度 var downH = ;//向下的箭頭的高度 var downW = ;//向下的箭頭的寬度 var dragH = ; //滾動條的高度 var dragW = ; //滾動條的寬度 var scrollH =; //滾動體的高度 var speed =; //滾動的速度 var dom = documentgetElementById ? true:false; var nn = documentlayers ? true:false; var ie = documentall ? true:false; var mouseY; var mouseX; var clickUp = false; var clickDown = false; var clickDrag = false; var clickAbove = false; var clickBelow = false; var timer = setTimeout(""); 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((documentlayers && ewhich!=) || (documentall && eventbutton!=)) return true; 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)*(/scrollLength)); contentT = eval( + contentT); moveTo(); if(ie) return false; } } function up(){ clearTimeout(timer); clickUp = false; clickDown = false; clickDrag = false; clickAbove = false; clickBelow = false; return true; } function getT(){ if(ie) contentT = documentallscrollerContentstylepixelTop; else if(nn) contentT = documentscrollerContentClipdocumentscrollerContenttop; else if(dom) contentT = parseInt(documentgetElementById("scrollerContent")styletop); } function getMouse(e){ if(ie){ mouseY = eventclientY + documentbodyscrollTop; mouseX = eventclientX + documentbodyscrollLeft; } else if(nn || dom){ mouseY = epageY; mouseX = epageX; } } function moveTo(){ if(ie){ documentallscrollerContentstyletop = contentT; documentallrulerstyletop = dragT; documentalldragstyletop = dragT; } else if(nn){ documentscrollerContentClipdocumentscrollerContenttop = contentT; documentrulertop = dragT; documentdragtop = dragT; } else if(dom){ documentgetElementById("scrollerContent")styletop = contentT + "px"; documentgetElementById("drag")styletop = dragT + "px"; documentgetElementById("ruler")styletop = dragT + "px"; } } function scrollUp(){ getT(); if(clickAbove){ if(dragT <= (mouseY(dragH/))) return up(); } if(clickUp){ if(contentT < ){ dragT = dragT (speed*scrollLength); if(dragT < (rulerT)) dragT = rulerT; contentT = contentT + speed; if(contentT > ) contentT = ; moveTo(); timer = setTimeout("scrollUp()"); } } return false; } function scrollDown(){ getT(); if(clickBelow){ if(dragT >= (mouseY(dragH/))) 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()"); } } return false; } function reloadPage(){ locationreload(); } function eventLoader(){ if(ie){ upL = documentallupstylepixelLeft; upT = documentallupstylepixelTop; downL = documentalldownstylepixelLeft; downT = documentalldownstylepixelTop; dragL = documentalldragstylepixelLeft; dragT = documentalldragstylepixelTop; rulerT = documentallrulerstylepixelTop; contentH = parseInt(documentallscrollerContentscrollHeight); contentClipH = parseInt(documentallscrollerContentClipstyleheight); } else if(nn){ upL = documentupleft; upT = documentuptop; downL = documentdownleft; downT = documentdowntop; dragL = documentdragleft; dragT = documentdragtop; rulerT = documentrulertop; contentH = documentscrollerContentClipdocumentscrollerContentclipbottom; contentClipH = documentscrollerContentClipclipbottom; } else if(dom){ upL = parseInt(documentgetElementById("up")styleleft); upT = parseInt(documentgetElementById("up")styletop); downL = parseInt(documentgetElementById("down")styleleft); downT = parseInt(documentgetElementById("down")styletop); dragL = parseInt(documentgetElementById("drag")styleleft); dragT = parseInt(documentgetElementById("drag")styletop); rulerT = parseInt(documentgetElementById("ruler")styletop); contentH = parseInt(documentgetElementById("scrollerContent")offsetHeight); contentClipH = parseInt(documentgetElementById("scrollerContentClip")offsetHeight); documentgetElementById("scrollerContent")styletop = + "px"; } scrollLength = ((scrollHdragH)/(contentHcontentClipH)); if(nn){ documentcaptureEvents(EventMOUSEDOWN | EventMOUSEMOVE | EventMOUSEUP); windowonresize = reloadPage; } documentonmousedown = down; documentonmousemove = move; documentonmouseup = up; } </script></head> <BODY onload="eventLoader()"> <SPAN id=drag style="LEFT: px;POSITION: absolute; TOP: px"><IMG height= src="slidergif" width= border=></SPAN> <SPAN id=ruler style="TOP: px"></SPAN> <SPAN id=up style="LEFT: px; POSITION: absolute; TOP: px"><IMG height= alt="" src="scrollupgif" width= border=></SPAN> <SPAN id=down style="LEFT: px; POSITION: absolute; TOP: px"><IMG height= alt="" src="scrolldowngif" width= border=></SPAN> <SPAN id=scrollerContentClip style=" LEFT: ; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: ; CLIP: rect(px px px px); POSITION: absolute; TOP: ; HEIGHT: ;border:#CC px solid"><SPAN id=scrollerContent style="width: ; height: ">  <p>ddd</p> <p>d</p> <p>d</p> <p>d</p> <p> </p> <p>dd</p> <p>d</p> <p> </p> <p>d</p> <p>d</p> <p> </p> <p>d</p> </SPAN></SPAN>     </body> </html>  
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19964.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.