数据读取中...
 您当前位置:惠州维修 -> 网络-> asp技术交流 文章搜索:  
含iframe的滚动页面
作者:转载 来源:惠州维修
日期: 2004-10-6
放大字体显示 缩小字体显示 打印文章 推荐给朋友
<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> 
<BODY 
onload="eventLoader()"> 
<SPAN 
id=drag 
style="LEFT: 203px;POSITION: absolute; TOP: 116px"><IMG 
height=26 src="slider.gif" width=9 border=1></SPAN> <SPAN 
id=ruler 
style="TOP: 116px"></SPAN> <SPAN 
id=up 
style="LEFT: 203px; POSITION: absolute; TOP: 100px"><IMG 
height=13 alt="" src="scrollup.gif" width=9 border=1></SPAN> <SPAN id=down 
style="LEFT: 203px; POSITION: absolute; TOP: 186px"><IMG 
height=13 alt="" src="scrolldown.gif" width=9 border=1></SPAN> <SPAN 
id=scrollerContentClip 
style=" LEFT: 100; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 100; CLIP: rect(0px 140px 194px 0px); POSITION: absolute; TOP: 100; HEIGHT: 100;border:#CC6600 1px solid"><SPAN 
id=scrollerContent style="width: 100; height: 100">  
<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> 
文章页数:[1] 
帮助你我他: 1.我有问题请教 2.我要投稿>>>
更多相关资料搜索:
热点文章
最新文章
相关文章
版权申明:除部分特别声明不要转载,或者授权本站独家播发的文章外,大家可以自由转载本站的原创文章,但原作者和来自本站的链接必须保留(非本站原创的,按照原来自一节,自行链接)。文章版权归本站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去本站水印。
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
发表评论  打印  刷新  推荐给朋友  返回顶部  关闭

网上大名: