Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 58
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Cool Scroller

Exempel

Exempel 1
Exempel 2
Exempel 3

Kod


<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt så länge som dessa rader står kvar. */ 

function coolscroller(text){
	this.version="1.01"; this.name="Cool Scroller";
	this.unique=Math.floor(Math.random()*1000000)+""; this.counter=0;
	this.text=(text)?text:this.version+" "+this.name; this.speed=1; this.height=20; this.width=200; this.boxstyle="border:solid black 1px;"
	this.init=function(){
		this.text+=" ";
		document.write('<div id="scroller'+this.unique+'" style="position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden;'+this.boxstyle+'">');
		document.write('<div id="container'+this.unique+'" style="position:absolute;color:white;white-space:nowrap;"><table border="0" cellpadding="0" cellspacing="0" id="both'+this.unique+'"><tr><td style="white-space:nowrap;'+this.scrollerstyle+'" id="part1'+this.unique+'"></td><td style="white-space:nowrap;'+this.scrollerstyle+'" id="part2'+this.unique+'"></td></tr></table></div>');
		document.write('</div>');
		document.getElementById("part1"+this.unique).innerHTML=this.text; document.getElementById("part2"+this.unique).innerHTML=this.text;
		this.scrollerWidth=document.getElementById("scroller"+this.unique).offsetWidth; this.scrollerHeight=document.getElementById("scroller"+this.unique).offsetHeight;
		this.contentWidthReal=this.contentWidth=document.getElementById("part1"+this.unique).offsetWidth; this.contentHeightReal=this.contentHeight=document.getElementById("part1"+this.unique).offsetHeight;
		if(this.contentWidth<this.scrollerWidth){
			this.contentWidth=this.scrollerWidth;
			document.getElementById("part1"+this.unique).style.width=this.scrollerWidth+"px";
			document.getElementById("part2"+this.unique).style.width=this.scrollerWidth+"px";
			document.getElementById("both"+this.unique).style.width=(this.scrollerWidth*2)+"px";
		}
		this.scrollerXpos=(this.speed>0)?this.scrollerWidth:0-this.scrollerWidth-this.contentWidthReal; this.scrollerYpos=0;
	}
	this.scroll=function(){
		this.counter++;
		if(this.ymod=="sin"){
			this.scrollerYpos=(Math.sin((2*this.speed*this.counter)*Math.PI/180)*(this.scrollerHeight-this.contentHeight)/2)+(this.scrollerHeight-this.contentHeight)/2;
		} else if(this.ymod=="bounce") {
			this.scrollerYpos=this.scrollerHeight-this.contentHeight-(Math.abs(Math.sin((2*this.speed*this.counter)*Math.PI/180))*(this.scrollerHeight-this.contentHeight));
		}
		if(this.xmod=="fixed"){
			this.scrollerXpos=this.scrollerWidth/2-this.contentWidthReal/2;
		} else if(this.xmod=="sin"){
			this.scrollerXpos=(Math.cos((2*this.speed*this.counter)*Math.PI/180)*(this.scrollerWidth-this.contentWidthReal)/2)+(this.scrollerWidth-this.contentWidthReal)/2;
		} else {
			this.scrollerXpos-=this.speed;
			if(this.scrollerXpos<0-this.contentWidth&&this.speed>0){ this.scrollerXpos+=this.contentWidth }
			if(this.scrollerXpos>0&&this.speed<0){ this.scrollerXpos-=this.contentWidth }
		}
		document.getElementById("container"+this.unique).style.left=parseInt(this.scrollerXpos)+"px";
		document.getElementById("container"+this.unique).style.top=parseInt(this.scrollerYpos)+"px";
	}
}
</script>

<strong>Exempel 1</strong><br />
<script type="text/javascript">
// I sin enklaste variant
var myScroller=new coolscroller('<span style="color:black;">Ett scrollscript från <a href="http://www.jojoxx.net">www.jojoxx.net</a>... Coolt! <img src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Symb_Glad.jpg" width="19" height="19" align="absmiddle"> </span>');
myScroller.init(); setInterval("myScroller.scroll()",10);
</script>

<strong>Exempel 2</strong><br />
<script type="text/javascript">
var myScroller2=new coolscroller();
myScroller2.text='<a href="http://www.jojoxx.net">www.jojoxx.net</a>';
myScroller2.scrollerstyle="font-family:verdana;color:black;";
myScroller2.speed=2;
myScroller2.width=300;
myScroller2.height=60;
myScroller2.ymod="sin"; myScroller2.xmod="sin";
myScroller2.init(); setInterval("myScroller2.scroll()",10);
</script>

<strong>Exempel 3</strong><br />
<script type="text/javascript">
var myScroller3=new coolscroller();
myScroller3.text='Studs, Studs, Studs...';
myScroller3.boxstyle="border-bottom:solid black 1px;";
myScroller3.scrollerstyle="font-family:verdana;color:black;";
myScroller3.speed=-2;
myScroller3.width=300;
myScroller3.height=60;
myScroller3.ymod="bounce";
myScroller3.init(); setInterval("myScroller3.scroll()",10);
</script>

Kommentar

Börja med att definiera en ny scoller med:
var minScroll=new coolscroller('En text som scrollas.');
Sedan kan du välja att sätta speciella egenskaper för din scroller, exempelvis ändra dess hastighet:
minScroll.speed=2;
Fler egenskaper är:

  • .text - Scrollerns innehåll.
  • .scrollerstyle - Stilmall för scrollerns innehåll.
  • .boxstyle - Stilmall för scrollerns ram.
  • .speed - Hastighet.
  • .width - Bredd på scrollern.
  • .height - Höjd på scrollern.
  • .ymod - Scrollerns beteende i y-led (sin/bounce/normal)
  • .xmod - Scrollerns beteende i x-led (sin/fixed/normal)

Till sist initierar och startar du scrollern med:
minScroll.init(); setInterval("minScroll.scroll()",10);


,