圖片代替滾動條

2024-09-05 12:17:51

字體：大中小

來源：轉載

供稿：網友

用圖片代替滾動條，嚴格來說是用JS和CSS虛擬出的框架效果，不少朋友挺喜歡的，不過代碼有點多喲，實用性不知怎么樣。

<html><head><title>圖片代替滾動條</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><STYLE type=text/css>#scrollerContent {POSITION: absolute}body {font-size:9pt;color:#660000;text-decoration: none}</STYLE><script>var upH = 13;//向上的箭頭的高度var upW = 9; //向上的箭頭的寬度var downH = 13;//向下的箭頭的高度var downW = 9;//向下的箭頭的寬度var dragH = 26; //滾動條的高度var dragW = 9; //滾動條的寬度var scrollH =68; //滾動體的高度var speed =9; //滾動的速度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;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.scrollerContent.style.pixelTop;else if(nn4)contentT = document.scrollerContentClip.document.scrollerContent.top;else if(dom)contentT = parseInt(document.getElementById("scrollerContent").style.top);}function getMouse(e){if(ie4){mouseY = event.clientY + document.body.scrollTop;mouseX = event.clientX + document.body.scrollLeft;}else if(nn4 || dom){mouseY = e.pageY;mouseX = e.pageX;}}function moveTo(){if(ie4){document.all.scrollerContent.style.top = contentT;document.all.ruler.style.top = dragT;document.all.drag.style.top = dragT;}else if(nn4){document.scrollerContentClip.document.scrollerContent.top = contentT;document.ruler.top = dragT;document.drag.top = dragT;}else if(dom){document.getElementById("scrollerContent").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 = parseInt(document.all.scrollerContent.scrollHeight);contentClipH = parseInt(document.all.scrollerContentClip.style.height);}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.scrollerContentClip.document.scrollerContent.clip.bottom;contentClipH = document.scrollerContentClip.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 = parseInt(document.getElementById("scrollerContent").offsetHeight);contentClipH = parseInt(document.getElementById("scrollerContentClip").offsetHeight);document.getElementById("scrollerContent").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></head><BODYonload="eventLoader()"><SPANid=dragstyle="LEFT: 203px;POSITION: absolute; TOP: 116px"><IMGheight=26 src="slider.gif" width=9 border=1> <SPANid=rulerstyle="TOP: 116px"> <SPANid=upstyle="LEFT: 203px; POSITION: absolute; TOP: 100px"><IMGheight=13 alt="" src="scrollup.gif" width=9 border=1> <IMGheight=13 alt="" src="scrolldown.gif" width=9 border=1> <SPANid=scrollerContentClipstyle=" LEFT: 100; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 100; CLIP: rect(0px 140px 194px 0px); POSITION: absolute; TOP: 100; HEIGHT: 100;border:#CC6600 1px solid"><SPANid=scrollerContent style="width: 100; height: 100"> 源碼愛好者呵呵呵呵呵呵嘿嘿呵呵呵呵www.survivalescaperooms.com呵呵呵哈哈哈 呵呵</body></html>

下一篇：Javascript結合Cookies仿淘寶網最近瀏覽功能