Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 86
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Scroller

Exempel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kod


<div class="scroller" id="foo" style="width:200px;height:100px;border:solid black 1px;overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>

<script type="text/javascript">
var scrollers=(scrollers)?scrollers:new Object();
var scrollerArray=document.getElementsByTagName("div");
for(var i=0;i<scrollerArray.length;i++){
	if(scrollerArray[i].className=="scroller" && !scrollers[scrollerArray[i].id]){
		scrollers[scrollerArray[i].id]=true;
		var id=scrollerArray[i].id;
		var width=parseInt(document.getElementById(id).style.width);
		var buttonXpos=parseInt(width/2)-5;
		var height=parseInt(document.getElementById(id).style.height);
		var html='<div id="'+id+'-scroller" style="position:absolute;">'+document.getElementById(id).innerHTML+'</div>'
		html='<div id="'+id+'-container" style="position:relative;width:'+width+'px;height:'+height+'px;overflow:hidden;">'+html+'</div>'
		html='<div style="position:absolute;top:-15px;left:'+buttonXpos+'px;"><span onmousedown="scroll(\''+id+'\',1); return false;" onmouseup="currentid=false; return false;" onmouseout="currentid=false; return false;" style="cursor:pointer;">^</span></div>'+html
		html='<div style="position:absolute;top:'+height+'px;left:'+buttonXpos+'px;"><span onmousedown="scroll(\''+id+'\',-1); return false;" onmouseup="currentid=false; return false;" onmouseout="currentid=false; return false;" style="cursor:pointer;">v</span></div>'+html
		document.getElementById(id).style.overflow="";
		document.getElementById(id).style.position="relative";
		document.getElementById(id).innerHTML=html;
	}
}
var currentid=false; var currentspeed=false;
function scroll(id,speed){
	currentid=(id)?id:currentid; currentspeed=(speed)?speed:currentspeed;
	if(!currentid){ return }
	var cheight=document.getElementById(currentid+"-scroller").offsetHeight;
	var height=parseInt(document.getElementById(currentid).style.height); height=(isNaN(height)||!height)?0:height;
	var ypos=parseInt(document.getElementById(currentid+"-scroller").style.top); ypos=(isNaN(ypos)||!ypos)?0:ypos;
	if(ypos<0-(cheight-height)&¤tspeed<0){ currentid=false; return; }
	if(ypos>=0&¤tspeed>0){ currentid=false; return; }
	ypos+=currentspeed;
	document.getElementById(currentid+"-scroller").style.top=ypos+"px";
	setTimeout("scroll()",10);
}
</script>

Kommentar

Sätter scrollfunktion på alla div's av klassen "scroller". Kom ihåg att använda alla style-attribut från exemplet (ändra givetvis efter behov) och ange ett unikt id för varje div.

,