知识大全 模拟滚动条

Posted 知

篇首语：努力尽今夕，少年犹可夸。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 模拟滚动条相关的知识，希望对你有一定的参考价值。

<head> <title>网页特效| wangqi | 模拟滚动条</title> <meta equiv="Content Type" content="text/; charset=gb ">   <STYLE type=text/css> #scrollerContent POSITION: absolute body font size: pt;color:# ;text decoration: none </STYLE> <script> var upH = ;//向上的箭头的高度 var upW = ; //向上的箭头的宽度 var downH = ;//向下的箭头的高度 var downW = ;//向下的箭头的宽度 var dragH = ; //滚动条的高度 var dragW = ; //滚动条的宽度 var scrollH = ; //滚动体的高度 var speed = ; //滚动的速度 var dom = document getElementById ? true:false; var nn = document layers ? true:false; var ie = 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("" ); 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!= ) || (document all && event button!= )) 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 = document all scrollerContent style pixelTop; else if(nn ) contentT = document scrollerContentClip document scrollerContent top; else if(dom) contentT = parseInt(document getElementById("scrollerContent") style top); function getMouse(e) if(ie ) mouseY = event clientY + document body scrollTop; mouseX = event clientX + document body scrollLeft; else if(nn || dom) mouseY = e pageY; mouseX = e pageX; function moveTo() if(ie ) document all scrollerContent style top = contentT; document all ruler style top = dragT; document all drag style top = dragT; else if(nn ) 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/ ))) 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() location reload(); function eventLoader() if(ie ) 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(nn ) 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 = + "px"; scrollLength = ((scrollH dragH)/(contentH contentClipH)); if(nn ) document captureEvents(Event MOUSEDOWN | Event MOUSEMOVE | Event MOUSEUP); window onresize = reloadPage; document onmousedown = down; document onmousemove = move; document onmouseup = up; </script></head> <BODY onload="eventLoader()"> <SPAN id=drag ><IMG height= src=slider gif width= border= ></SPAN> <SPAN id=ruler ></SPAN> <SPAN id=up ><IMG height= src=scrollup gif width= border= ></SPAN> <SPAN id=down ><IMG height= src=scrolldown gif width= border= ></SPAN> <SPAN id=scrollerContentClip ><SPAN id=scrollerContent >  <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> </>   cha138/Article/program/Java/JSP/201311/19964

相关参考

知识大全 js控制滚动条缓慢滚动到顶部

cha138/Article/program/Java/JSP/201311/20247

知识大全 利用jquery的滚动条滚动固定div

cha138/Article/program/Java/JSP/201311/20304

知识大全 网页标准的随滚动条滚动的广告特效

cha138/Article/program/Java/Javascript/201311/25350

知识大全 iframe并且控制不出现横向的滚动条的方法

　　当我们中使用iframe时正常情况下当出现上下方向的滚动条时横向的滚动条也就出现了　　为此我们如果是想控制在横向上不出现滚动条的话可以采取以下解决方案:　　在aspx页面中的<><

知识大全 .net 2.0中iframe并且控制滚动条的方法

　　当我们在net中使用iframe时正常情况下当出现上下方向的滚动条时横向的滚动条也就出现了　　为此我们如果是想控制在横向上不出现滚动条的话可以采取以下解决方案:　　在aspx页面中的<>

知识大全 jquery 滚动条事件简单实例

这篇文章介绍了jquery滚动条事件的简单实例有需要的朋友可以参考一下 复制代码代码如下:cha138/Article/program/Java/JSP/201311/20441

知识大全 scrollLeft实现按钮控制滚动条相册

scrollLeft实现按钮控制滚动条相册  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　我想大

知识大全 利用div+jquery自定义滚动条样式的2种方法

可以设置左边菜单项div的overflowx:auto;overlfowy:auto;这样就会自动生成了滚动条但是大家都知道自带的不好看接下来就是重点了如何修改滚动条的样式呢？感兴趣的朋友可以了解下本

知识大全 启动时一次突然停电，导致XP系统不能启动，但滚动条一直滚动,什么模式都进不去，重装系统也一样

启动时一次突然停电，导致XP系统不能启动，但滚动条一直滚动,什么模式都进不去，重装系统也一样  以下文字资料是由(本站网www.cha138.com)小编为大家搜集整理后

知识大全 js固定DIV高度,超出部分自动添加滚动条的简单方法

js固定DIV高度,超出部分自动添加滚动条的简单方法  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！