Mausverfolger Wellentext

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Mausverfolger Wellentext

Beitrag von Hape »

Dieses Script läßt einen Text in Wellenform hinter dem Mauszeiger erscheinen.

Code: Alles auswählen

<script type='text/javascript'>
<!--
// Bitte den Text hier eingeben. KEIN HTML-CODE!!!
var text='Dieser Text wellt so lustig vor sich hin...';   // der Text der angezeigt werden soll
var delay=15;                                 // Geschwindigkeit
var txtw=16;                                  // Abstand der Buchstaben
var xoff=10;                                  // Abstand von linken Bildrand oder vom Mauszeiger
var yoff=10;                                  // Abstand vom oberen Bildrand oder vom Mauszeiger
var sampleinc=0.3;                            // Die Weite der Schwingungen
var amplitude=20;                             // Die Hoehe der Schwingungen
var mousefollow=true;                         // true=text folgt der Maus false= Text bleibt stehen
var beghtml='<font color="#336699"><strong>'; // Farbe und Schriftgrad des Textes
var endhtml='</strong></font>';               // beendet Farbe und Schriftgrad

var isMinNS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var isMinIE4 = (document.all)? true : false;
var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0)? true : false;
var isMinNS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

text=text.split('');
var t='', ex=sampleinc, mousex=0, mousey=0;
for(i=1;i<=text.length;i++){
t+=(isMinNS4)? '<layer name="txt'+i+'" top="-10" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-1000px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(isMinNS4)? '</layer>' : '</div>';
}
document.write(t);
for(i=1;i<=text.length;i++){
        eval('var txt'+i+'=getlayer("txt'+i+'")');
}
function init(){
        setInterval('movetxts()',delay);
        if(mousefollow){
                if(isMinNS4)document.captureEvents(Event.MOUSEMOVE);
                document.onmousemove=adjmousepos;
        }
}
function adjmousepos(evt){
        if(isMinNS4 || isMinNS6){
                mousex=evt.pageX+xoff;
                mousey=evt.pageY+yoff;
        }
        if(isMinIE4){
                mousex=event.clientX+document.documentElement.scrollLeft+xoff;
                mousey=event.clientY+document.documentElement.scrollTop+yoff;
        }
}
function movetxts(){
        var tmp1, tmp2;
        for(i=text.length;i>1;i=i-1){
                tmp1=eval('txt'+i);
                tmp2=eval('txt'+(i-1));
                if(getlayerleft(tmp2)+txtw*2>=getwindowwidth()){
                        movelayerto(tmp2,0,-1000);
                        movelayerto(tmp1,0,-1000);
                } else {
                        movelayerto(tmp1, getlayerleft(tmp2)+txtw, getlayertop(tmp2));
                }
        }
        movelayerto(txt1,xoff+mousex,yoff+mousey+(Math.sin(ex)*amplitude)+Math.abs(amplitude));
        ex=ex+sampleinc;
}
var isMinNS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var isMinIE4 = (document.all)? true : false;
var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0)? true : false;
var isMinNS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

function hidelayer(layer){
        if(isMinNS4)layer.visibility = "hide";
        if(isMinIE4 || isMinNS6)layer.style.visibility = "hidden";
}

function showlayer(layer){
        if(isMinNS4)layer.visibility = "show";
        if(isMinIE4 || isMinNS6)layer.style.visibility = "visible";
}

function inheritlayer(layer){
        if(isMinNS4)layer.visibility = "inherit";
        if(isMinIE4 || isMinNS6)layer.style.visibility = "inherit";
}

function getvisibility(layer){
                if(isMinNS4){
                        if(layer.visibility=="show")return "visible";
                        if(layer.visibility=="hide")return "hidden";
                        return layer.visibility;
                }
        if(isMinIE4 || isMinNS6)return layer.style.visibility;
        return "";
}

function movelayerto(layer,x,y){
        if(isMinNS4)layer.moveTo(x,y);
        if(isMinIE4 || isMinNS6){
                layer.style.left=x+'px';
                layer.style.top=y+'px';
        }
}

function movelayerby(layer,dx,dy){
        if(isMinNS4)layer.moveBy(dx, dy);
        if(isMinIE4 || isMinNS6){
                layer.style.left=(getlayerleft(layer)+dx)+'px';
                layer.style.top=(getlayertop(layer)+dy)+'px';
        }
}

function getlayerleft(layer){
if(isMinNS4)return layer.left;
if(isMinIE4 || isMinNS6)return parseInt(layer.style.left);
return -1;
}

function getlayertop(layer){
if(isMinNS4)return layer.top;
if(isMinIE4 || isMinNS6)return parseInt(layer.style.top);
return -1;
}

function getlayerright(layer){
if(isMinNS4)return layer.left+getlayerwidth(layer);
if(isMinIE4 || isMinNS6)return parseInt(layer.style.left)+getlayerwidth(layer);
return -1;
}

function getlayerbottom(layer){
if(isMinNS4)return layer.top+getlayerheight(layer);
if(isMinIE4 || isMinNS6)return parseInt(layer.style.top)+getlayerheight(layer);
return -1;
}

function getpageleft(layer){
var x;
if(isMinNS4)return layer.pageX;
if(isMinIE4){
x = 0;
while(layer.offsetParent!=null){
x+=layer.offsetLeft;
layer=layer.offsetParent;
}
x+=layer.offsetLeft;
return x;
}
if(isMinNS6)return -1;
return -1;
}

function getpagetop(layer){
var y;
if(isMinNS4)return layer.pageY;
if(isMinIE4){
y=0;
while(layer.offsetParent!=null){
y+=layer.offsetTop;
layer=layer.offsetParent;
}
y+=layer.offsetTop;
return y;
}
if(isMinNS6)return -1;
return -1;
}

function getlayerwidth(layer){
if(isMinNS4){
if(layer.document.width)
return layer.document.width;
else
return layer.clip.right-layer.clip.left;
}
if(isMinIE4){
if(layer.style.pixelWidth)
return layer.style.pixelWidth;
else
return layer.clientWidth;
}
if(isMinNS6)return parseInt(layer.style.width);
return -1;
}

function getlayerheight(layer){
if(isMinNS4){
if(layer.document.height)return layer.document.height;
else
return layer.clip.bottom-layer.clip.top;
}
if(isMinIE4){
if(layer.style.pixelHeight)
return layer.style.pixelHeight;
else
return layer.clientHeight;
}
if(isMinNS6)return parseInt(layer.style.height);
return -1;
}

function getzindex(layer){
if(isMinNS4)return layer.zIndex;
if(isMinIE4 || isMinNS6)return layer.style.zIndex;
return -1;
}

function setzindex(layer,z){
if(isMinNS4)layer.zIndex=z;
if(isMinIE4 || isMinNS6)layer.style.zIndex=z;
}

function cliplayer(layer, cliptop, clipright, clipbottom, clipleft){
if(isMinNS4){
layer.clip.left= clipleft;
layer.clip.top=cliptop;
layer.clip.right=clipright;
layer.clip.bottom=clipbottom;
}
if(isMinIE4  || isMinNS6)layer.style.clip='rect('+cliptop+' '+clipright+' '+clipbottom+' '+clipleft+')';
}

function getclipleft(layer){
if(isMinNS4)return layer.clip.left;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if(!str)return 0;
var clip=getIEclipvalues(layer.style.clip);
return(clip[3]);
}
return -1;
}

function getcliptop(layer){
if(isMinNS4)return layer.clip.top;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if(!str)return 0;
var clip=getIEclipvalues(layer.style.clip);
return clip[0];
}
return -1;
}

function getclipright(layer){
if(isMinNS4)return layer.clip.right;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if(!str)return layer.style.pixelWidth;
var clip=getIEclipvalues(layer.style.clip);
return clip[1];
}
return -1;
}

function getclipbottom(layer){
if(isMinNS4)return layer.clip.bottom;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if(!str)return layer.style.pixelHeight;
var clip=getIEclipvalues(layer.style.clip);
return clip[2];
}
return -1;
}

function getclipwidth(layer){
if(isMinNS4)return layer.clip.width;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if (!str)return layer.style.pixelWidth;
var clip=getIEclipvalues(layer.style.clip);
return clip[1]-clip[3];
}
return -1;
}

function getclipheight(layer){
if(isMinNS4)return layer.clip.height;
if(isMinIE4 || isMinNS6){
var str=layer.style.clip;
if(!str)return layer.style.pixelHeight;
var clip=getIEclipvalues(layer.style.clip);
return clip[2]-clip[0];
}
return -1;
}

function getIEclipvalues(str){
var clip = new Array();
var i;
// Parse out the clipping values for IE layers.
i=str.indexOf("(");
clip[0]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1);
clip[1]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1);
clip[2]=parseInt(str.substring(i+1,str.length),10);
i=str.indexOf(" ",i+1);
clip[3]=parseInt(str.substring(i+1,str.length),10);
return clip;
}

function scrolllayerto(layer,x,y,bound){
var dx=getclipleft(layer)-x;
var dy=getcliptop(layer)-y;
scrolllayerby(layer,-dx,-dy,bound);
}

function scrolllayerby(layer,dx,dy,bound){
var cl=getclipleft(layer);
var ct=getcliptop(layer);
var cr=getclipright(layer);
var cb=getclipbottom(layer);
if(bound){
if(cl+dx<0)
dx = -cl;
else
if(cr+dx>getlayerwidth(layer))
dx=getlayerwidth(layer)-cr;
if(ct+dy<0)
dy = -ct;
else
if(cb+dy>getlayerheight(layer))
dy=getlayerheight(layer)-cb;
}
cliplayer(layer,cl+dx,ct+dy,cr+dx,cb+dy);
movelayerby(layer,-dx,-dy);
}

function setbgcolor(layer,color){
if(isMinNS4)layer.bgColor=color;
if(isMinIE4 || isMinNS6)layer.style.backgroundColor=color;
}

function setbgimage(layer,src){
if(isMinNS4)layer.background.src=src;
if(isMinIE4 || isMinNS6)layer.style.backgroundImage="url("+src+")";
}

function getlayer(name){
if(isMinNS4)return findlayer(name,document);
if(isMinIE4)return eval('document.all.'+name);
if(isMinNS6)return document.getElementById(name);
return null;
}

function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function getimage(name){
if(isMinNS4)return findimage(name,document);
if(isMinIE4)return eval('document.all.' + name);
if(isMinNS6)return document.getElementById(name);
return null;
}

function findimage(name,doc){
var i,img;
for(i=0;i<doc.images.length;i++)
if(doc.images[i].name==name)
return doc.images[i];
for(i=0;i<doc.layers.length;i++)
if((img=findimage(name,doc.layers[i].document))!=null){
img.container=doc.layers[i];
return img;
}
return null;
}

function getimagepageleft(img){
var x,obj;
if(isMinNS4){
if(img.container!=null)
return img.container.pageX+img.x;
else
return img.x;
}
if(isMinIE4){
x=0;
obj=img;
while(obj.offsetParent!=null){
x+=obj.offsetLeft;
obj=obj.offsetParent;
}
x+=obj.offsetLeft;
return x;
}
if(isMinNS6) return -1;
return -1;
}

function getimagepagetop(img){
var y,obj;
if(isMinNS4){
if(img.container!=null)
return img.container.pageY+img.y;
else
return img.y;
}
if(isMinIE4){
y=0;
obj=img;
while(obj.offsetParent!=null){
y+=obj.offsetTop;
obj=obj.offsetParent;
}
y+=obj.offsetTop;
return y;
}
if(isMinNS6) return -1;
return -1;
}

function getwindowwidth(){
if(isMinNS4 || isMinNS6)return window.innerWidth;
if(isMinIE4)return document.body.clientWidth;
return -1;
}

function getwindowheight(){
if(isMinNS4 || isMinNS6)return window.innerHeight;
if(isMinIE4)return document.body.clientHeight;
return -1;
}

function getpagewidth(){
if(isMinNS4 || isMinNS6)return document.width;
if(isMinIE4)return document.body.scrollWidth;
return -1;
}

function getpageheight(){
if(isMinNS4 || isMinNS6)return document.height;
if(isMinIE4)return document.body.scrollHeight;
return -1;
}

function getpagescrollx(){
if(isMinNS4 || isMinNS6)return window.pageXOffset;
if(isMinIE4)return document.documentElement.scrollLeft;
return -1;
}

function getpagescrolly(){
if(isMinNS4 || isMinNS6)return window.pageYOffset;
if(isMinIE4)return document.documentElement.scrollTop;
return -1;
}

function writelayer(layer,text){
if(isMinNS4){
layer.document.open();
layer.document.write('<div style="position:absolute; left:0px; top:0px;">'+text+'</div>');
layer.document.close();
}
if(isMinIE4||isMinNS6)layer.innerHTML=text;
}
window.onload=init;
//-->
</script>
Hier die Demoseite: Wellentext

Antworten