bibaram<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.squidfingers.com/code/dhtml/divscroller/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>DivScroller</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987">
<SCRIPT type=text/javascript>
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 01/24/03 ---------------------------------------------------------
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// Cross-Browser Functions
var dom = document.getElementById;
var iex = document.all;
var ns4 = document.layers;
function addEvent(event,method){
this[event] = method;
if(ns4) this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function removeEvent(event){
this[event] = null;
if(ns4) this.releaseEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function getElement(name,nest){
nest = nest ? "document."+nest+"." : "";
var el = dom ? document.getElementById(name) : iex ? document.all[name] : ns4 ? eval(nest+"document."+name) : false;
el.css = ns4 ? el : el.style;
el.getTop = function(){return parseInt(el.css.top) || 0};
el.setTop = function(y){el.css.top = ns4 ? y: y+"px"};
el.getHeight = function(){return ns4 ? el.document.height : el.offsetHeight};
el.getClipHeight = function(){return ns4 ? el.clip.height : el.offsetHeight};
el.hideVis = function(){el.css.visibility="hidden"};
el.addEvent = addEvent;
el.removeEvent = removeEvent;
return el;
}
function getYMouse(e){
return iex ? event.clientY : e.pageY;
}
document.addEvent = addEvent;
document.removeEvent = removeEvent;
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Scroller Class
ScrollObj = function(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
this.speed = speed;
this.dragHeight = dragHeight;
this.trackHeight = trackHeight;
this.trackObj = getElement(trackObj);
this.upObj = getElement(upObj);
this.downObj = getElement(downObj);
this.dragObj = getElement(dragObj);
this.contentMaskObj = getElement(contentMaskObj);
this.contentObj = getElement(contentObj,contentMaskObj);
this.obj = contentObj+"Object";
eval(this.obj+"=this");
this.trackTop = this.dragObj.getTop();
this.trackLength = this.trackHeight-this.dragHeight;
this.trackBottom = this.trackTop+this.trackLength;
this.contentMaskHeight = this.contentMaskObj.getClipHeight();
this.contentHeight = this.contentObj.getHeight();
this.contentLength = this.contentHeight-this.contentMaskHeight;
this.scrollLength = this.trackLength/this.contentLength;
this.scrollTimer = null;
if(this.contentHeight <= this.contentMaskHeight){
this.dragObj.hideVis();
}else{
var self = this;
this.trackObj.addEvent("onmousedown", function(e){self.scrollJump(e);return false});
this.upObj.addEvent("onmousedown", function(){self.scroll(self.speed);return false});
this.upObj.addEvent("onmouseup", function(){self.stopScroll()});
this.upObj.addEvent("onmouseout", function(){self.stopScroll()});
this.downObj.addEvent("onmousedown", function(){self.scroll(-self.speed);return false});
this.downObj.addEvent("onmouseup", function(){self.stopScroll()});
this.downObj.addEvent("onmouseout", function(){self.stopScroll()});
this.dragObj.addEvent("onmousedown", function(e){self.startDrag(e);return false});
if(iex) this.dragObj.addEvent("ondragstart", function(){return false});
}
}
ScrollObj.prototype.startDrag = function(e){
this.dragStartMouse = getYMouse(e);
this.dragStartOffset = this.dragObj.getTop();
var self = this;
document.addEvent("onmousemove", function(e){self.drag(e)});
document.addEvent("onmouseup", function(){self.stopDrag()});
}
ScrollObj.prototype.stopDrag = function(){
document.removeEvent("onmousemove");
document.removeEvent("onmouseup");
}
ScrollObj.prototype.drag = function(e){
var currentMouse = getYMouse(e);
var mouseDifference = currentMouse-this.dragStartMouse;
var dragDistance = this.dragStartOffset+mouseDifference;
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
this.dragObj.setTop(dragMovement);
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
this.contentObj.setTop(contentMovement);
}
ScrollObj.prototype.scroll = function(speed){
var contentMovement = this.contentObj.getTop()+speed;
var dragMovement = this.trackTop-Math.round(this.contentObj.getTop()*(this.trackLength/this.contentLength));
if(contentMovement > 0){
contentMovement = 0;
}else if(contentMovement < -this.contentLength){
contentMovement = -this.contentLength;
}
if(dragMovement < this.trackTop){
dragMovement = this.trackTop;
}else if(dragMovement > this.trackBottom){
dragMovement = this.trackBottom;
}
this.contentObj.setTop(contentMovement);
this.dragObj.setTop(dragMovement);
this.scrollTimer = window.setTimeout(this.obj+".scroll("+speed+")",25);
}
ScrollObj.prototype.stopScroll = function(){
if(this.scrollTimer){
window.clearTimeout(this.scrollTimer);
this.scrollTimer = null;
}
}
ScrollObj.prototype.scrollJump = function(e){
var currentMouse = getYMouse(e);
var dragDistance = currentMouse-(this.dragHeight/2);
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
this.dragObj.setTop(dragMovement);
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
this.contentObj.setTop(contentMovement);
}
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Misc Functions
function fixNetscape4(){
if(ns4origWidth != window.innerWidth || ns4origHeight != window.innerHeight){
window.location.reload();
}
}
if(document.layers){
ns4origWidth = window.innerWidth;
ns4origHeight = window.innerHeight;
window.onresize = fixNetscape4;
}
// ||||||||||||||||||||||||||||||||||||||||||||||||||
window.onload = function(){
// speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
};
</SCRIPT>
<STYLE type=text/css>
BODY {OVERFLOW: hidden; BACKGROUND-COLOR: #785a3c}
P {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 10px; COLOR: #785a3c; LINE-HEIGHT: 13px; PADDING-TOP: 0px; FONT-FAMILY: verdana,sans-serif}
</STYLE>
<BODY>
<DIV id=box style="Z-INDEX: 1; LEFT: 65px; POSITION: absolute; TOP: 75px"><IMG name=zb_target_resize style="cursor:hand"
height=150 src="http://ganji.80port.net/bbs/ganji_Javascript_source/DivScroller.files/box.gif" width=250> </DIV>
<DIV id=up
style="Z-INDEX: 2; LEFT: 315px; CURSOR: pointer; POSITION: absolute; TOP: 75px"><IMG name=zb_target_resize style="cursor:hand"
height=20 src="http://ganji.80port.net/bbs/ganji_Javascript_source/DivScroller.files/up.gif" width=21> </DIV>
<DIV id=track
style="Z-INDEX: 3; LEFT: 315px; POSITION: absolute; TOP: 95px"><IMG name=zb_target_resize style="cursor:hand" height=110
src="http://ganji.80port.net/bbs/ganji_Javascript_source/DivScroller.files/track.gif" width=21> </DIV>
<DIV id=drag
style="Z-INDEX: 4; LEFT: 315px; CURSOR: pointer; POSITION: absolute; TOP: 95px"><IMG name=zb_target_resize style="cursor:hand"
height=19 src="http://ganji.80port.net/bbs/ganji_Javascript_source/DivScroller.files/drag.gif" width=21> </DIV>
<DIV id=down
style="Z-INDEX: 5; LEFT: 315px; CURSOR: pointer; POSITION: absolute; TOP: 205px"><IMG name=zb_target_resize style="cursor:hand"
height=20 src="http://ganji.80port.net/bbs/ganji_Javascript_source/DivScroller.files/down.gif" width=21> </DIV>
<DIV id=contentMask
style="Z-INDEX: 6; LEFT: 75px; OVERFLOW: hidden; WIDTH: 230px; POSITION: absolute; TOP: 85px; HEIGHT: 130px">
<DIV id=content style="LEFT: 0px; WIDTH: 230px; POSITION: absolute; TOP: 0px">
<P>
대략 이 안으로 내용이 들어가면 됩니다.<br>스크롤을 생성해야 겠네요<br><br><br><br><br>나와줘 스크롤,,,<br><br><br><br><br>오~ 나왔어 ㅎㅎㅎ 땡쓰<br><br>배경 이미지 두개와 <br>스크롤관련 하나 그리고<br>화살표 이미지 두개가 대략 필요합니다</P></DIV></DIV>
</BODY>
</HTML>
