Geile GFX Site + 1 Frage

[CrackPod]

http://www.terrasight.net/
Das ist eine Sau geile GFX Site die ich euch mal vorstellenn wollte.

Und meine Frage:
Weiß jemand wie man den Scrollbar hinbekommt, der dort verwendet wird.
Ich weiß dass es mit Javascript arbeitet aber ich will ein Tutorial bzw nicht nur den Code klauen

 

[Mr. DHTML]

was is denn mit der scrollbar, außer, dass sie gefärbt is :shock:

 

[Darksoldier7]

die verändert halt die farbe beim drübergehn...
is immer nur einma die schrift in rot und einma in weiß, und dann machste mouzeover also so würd ichs machen oder mit sonst was wo mir grad net einfällt

 

[Mr. DHTML]

ach, die verändert die farbe?!
also bei mir nich; oder benutz ich nur den falschen browser :mrgreen:

 

[Volcom]

Ey ich will auch wissen wie man sowas macht... !!!

 

[Thyson]

lol?
wo isn da ne scrollbar? :shock: *blindsei*

ich seh da nur den monitor und wenn ich da draufklicke öffnet sich die page in einem fenster. aba da ist doch keine scrollbar die die farbe verändert? :|

 

[CrackPod]

Seits ihr blind???
Der hat da eigene Bilder für den Scrollbar!!!
Außerdem wird der auch in Mozilla Netscape Opera FireFox verändert!!!!

 

[ingoS]

Soweit ich das als JavaScript-Laie erkennen kann, steht das entsprechende Script doch im Quelltext. Oder willst du, dass dir jemand mit Ahnung das erklärt?
-----------------------------------
Edit:
Das ist aber nichts für mich, ich scrolle zu 70% mit den Pfeiltasten.
-----------------------------------

 

[CrackPod]

Ja ich will den Code nicht nur "klauen" ich habe bereits nachgefragt und diesen schon komplett bekommen aber ich möchte diesen auch verstehen.

 

[raphaelp]

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// 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);
}

ist ne javascript scrollbar.

 

[Thyson]

achso xD die scrollbar habsch auch gesehen ;ugl

Naja sonen Code will ich gar net haben ;)

cu
Thyson

 

[raphaelp]

warum denn nicht? was ist falsch dran? ObjektOrientiertes JavaScript, die beste erfindung seit dem Pizzalieferservice! :) der code ist auch supersauber und komprimiert. Da koennte sich so einiger was abschauen. Uebrigens funktioniert der code nicht per copy-paste, da er auf externe funktionen zugreift. ich habe bloss die Scroller klasse gepasted.