#1 von
wolf.andres
, 30.05.2007 18:32
Auf der Seite von xeam.de habe ich einige nützliche, interessante, aber auch lustige Java Scrips gesehen. Alle Scrips lassen sich herunterladen!
Nützlich fürs Forum und für die Homepage.
Hier kommen sie: 
Außergewöhnliche Analoguhr:
http://www.xeam.de/content.php?id=7
Animierter Seitentitel:
http://www.xeam.de/content.php?id=16
Bilderzoom:
http://www.xeam.de/data/41/bilder_zoom.html
Text mit Mausverfolgung:
http://www.xeam.de/content.php?id=97
Sehr ausgefallene Willkommens-Animation:
http://www.xeam.de/content.php?id=82
Elastischer Text:
http://www.xeam.de/content.php?id=20
Reaktionszeit testen:
http://www.xeam.de/data/26/reaktionstest.html
Bis dann
wolf.andres
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
#2 von
Berno
, 29.07.2007 18:43
Die Mausverfolgung ist nice!!!
Danke
cya
Berno 
-Ich liebe Menschen, die frei heraussprechen was sie denken, vorausgesetzt sie denken dasselbe wie ich.
-Ritter des Rechts
-Frontplayer (Wo ich bin ist vorne und schanzen spart Blut)
-Hells Angels Banger
-Gang Banger
| Beiträge: | 8 |
| Registriert am: | 29.07.2007 |
#3 von
Daniel
, 01.08.2007 20:57
Wollte das mit dem animierten seitentitel machen aber wo füge ich das ein?
| Beiträge: | 17 |
| Registriert am: | 19.07.2007 |
#4 von
wolf.andres
, 02.08.2007 17:24
Hallo Daniel, 
Nachtrag:
Das Script "Animierter Seitentitel" wird im Bereich zwischen <body> + </body> im Templeate eingetragen. 
Hier der Pfad: Admin > Templeate > edit > Obere Leiste 
Bis dann und viel Spass
Wolfgang
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
#5 von
Daniel
, 02.08.2007 21:20
ich glaube ich bin zu blöd das geht nicht,sieht so aus
<HTML>
<HEAD><script type="text/javascript">
// --------------------------------------------------
// --- (c) 2002/2005 XEAM.de ------------------------
// --------------------------------------------------
var speed=500;
var tmp=window.document.title;
function title (a)
{
window.document.title=(a%2==0)?(tmp):(tmp.toUpperCase ());
window.setTimeout ("title ("+(a+1)+")", speed);
}
title (0);
</script>{{meta_refresh}}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<META NAME="keywords" CONTENT="{{hpmtext}}">
<META NAME="description" CONTENT="{{hpmtitle}}">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="{{link_css}}">
<link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss">
<TITLE>{{html_title}}</TITLE>
</HEAD>
| Beiträge: | 17 |
| Registriert am: | 19.07.2007 |
#6 von
wolf.andres
, 03.08.2007 12:28
Hallo Daniel, 
ich habe es erneut ausprobiert und konnte mir nicht vorstellen, warum es jetzt nicht funktionieren sollte!?
Viele Scripte werden im "Header-Bereich", zwischen <head> + </head> eingefügt.
Ausgerechnet das Script "animierter Seitentitel" funktioniert nur im "Body-Bereich", also zwischen <body> + </body>. Sorry.
Einfach das Script in "Admin > Template > edit > Obere Leiste" nach den folgenden Zeilen eintragen:<TITLE>{{html_title}}</TITLE>
</HEAD>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
........S c r i p t ........
Noch eine kleine Info zum Script:
Ein Verändern des Grün gekennzeichneten Wertes verändert die Blinkgeschwindigkeit.
Ein Vergrößern des Rot gekennzeichneten Wertes, verändert das Blinkverhältnis.var speed=500;
window.document.title=(a%2==0)?(tmp):(tmp.toUpperCase ());
PS:
Ich habe den Fehler im Beitrag korregiert!
Bis dann
wolf.andres
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
#7 von
wolf.andres
, 21.08.2007 12:20
Mausverfolgung individuell einstellbar
Zitat von Berno
Die Mausverfolgung ist nice!!!
Danke
Hallo Berno,
habe die Mausverfolgung erweitert.
Unter anderem den Buchstabenabstand vergrößert (Der erste Buchstabe war auf der rechten Seite leicht abgeschnitten).
Neue Einstellungen unter "var":
1. Buchstabenabstand einstellbar (wsize)
2. Schriftbreite (fweight)
3. Schriftstil einstellbar (fstyle)
4. Rahmenbreite einstellbar (bwidth)
5. Rahmenfarbe einstellbar (bcolour)
6. Rahmentyp einstellbar (bstyle)
7. Innenabstand einstellbar (pright, pleft, ptop, pbottom)
8. Einfügen einer Hintergrundfarbe (bgcolour)
9. Einfügen eines Hintergrundbildes (image)
Hier das Script:
<script type="text/javascript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Schrift-Einstellungen > Anfang
var msg = 'Hilfe, Tricks & Tipps'; // Text
var font = 'arial'; // Schriftart - Arial, Arial Black, Comic Sans MS, Courier New, Impact, Verdana
var size = 13; // Schriftgröße - Angabe in px
var fstyle = 'normal'; // Schriftstil - italic, oblique, normal
var fweight = '100'; // Schriftdicke - 100, 200, 300, 400, 500, 600, 700, 800, 900
var pleft = 0; // Linker Innenabstand in px
var pright = 0; // Rechter Innenabstand in px
var ptop = 0; // Oberer Innenabstand in px
var pbottom = 0; // Unterer Innenabstand in px
var wsize = 1.0; // Buchstabenabstand - Min. 1.0 ohne Rahmen, mit Rahmen +0.1 pro 1px Rahmenbreite, bei pright > 0 = anpassen
var colour = '#FCC803'; // Schriftfarbe
var bsize = 1; // Rahmenbreite - Angabe in px
var bstyle = 'none'; // Rahmentyp - none (keine Rahmen), solid, dotted, dashed, double, groove, ridge, inset, outset
var bcolour = '#0000FF'; // Rahmenfarbe
var bgcolour = '#0C06B0'; // Hintergrundfarbe
var image = ' '; // Hintergrundbild - z.B. 'http://www.bilder-hochladen.net/files/1tys-74.gif'
var delay = 0.45; // Verzögerung - kleine Werte, starke Verzögerung - Wert= 0.01 bis 0.99
var speed = 40; // Geschwindigkeit - kleine Werte, hohe Geschwindigkeit - Werte= größer 1
var yOffSet = 25; // Y-Abstand zum Mauszeiger in px
var xOffSet = 25; // X-Abstand zum Mauszeiger in px
//Schrift-Einstellungen > Ende
var d = document;
msg = msg.split("");
var n = msg.length;
var y = 0;
var x = 0;
var yp = [];
var xp = [];
var yd = [];
var xd = [];
var temp = [];
var idx = document.getElementsByTagName('div').length;
var scy = 0;
var scx = 0;
var dom = (typeof window.pageYOffset == "number");
d.write('<div style="position:absolute;top:0px;left:0px;">'
+'<div style="position:relative">');
for (i = 0; i < n; i++){
d.write("<div id='letters"+(idx+i)+"' style='position : absolute;"
+"top : 0px;left : 0px;"
+"height : auto;width : "+size+"px;"
+"text-align : center;"
+"background-image: url("+image+");"
+"border : "+bsize+"px;"
+"border-style : "+bstyle+";"
+"border-color : "+bcolour+";"
+"background-color : "+bgcolour+";"
+"padding-left : "+pleft+"px;"
+"padding-right : "+pright+"px;"
+"padding-top : "+ptop+"px;"
+"padding-bottom : "+pbottom+"px;"
+"font : "+size+"px "+font+";color : "+colour+";font-weight : "+fweight+";font-style : "+fstyle+";'>"+msg[i]+"</div>");}
document.write('</div></div>');
function scroll(){
if (dom){
scy = window.pageYOffset;
scx = window.pageXOffset;
}
else{
scy = d.documentElement.scrollTop||d.body.scrollTop;
scx = d.documentElement.scrollLeft||d.body.scrollLeft;
}
}
function mouse(e){
e = e||window.event;
y = yOffSet + ((e.pageY-scy)||e.clientY);
x = xOffSet + ((e.pageX-scx)||e.clientX);
}
function assign(){
for (i = 0; i < n; i++){
temp[i].top = Math.floor(yp[i]) + 'px';
temp[i].left = Math.floor(xp[i]) + (i*(size * wsize)) + 'px';
}
}
function ripple(){
yp[0] = yd[0]+=((y+scy)-yd[0]) * delay;
xp[0] = xd[0]+=((x+scx)-xd[0]) * delay;
for (var i = 1; i < n; i++){
yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
}
scroll();
assign();
setTimeout(ripple,speed);
}
function init(){
for (i = 0; i < n; i++){
yp[i] = 0;
xp[i] = 0;
yd[i] = 0;
xd[i] = 0;
temp[i] = d.getElementById("letters"+(idx+i)).style;
}
ripple();
}
if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}
</script>
Die Mausverfolgung in Aktion (sehenswert): http://www.future-andres.de/forum/Mausverfolgung2.html
Mein Forum: http://104774.homepagemodules.de/
Gruß
Wolf
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
#8 von
Agnes
, 01.09.2007 00:33
Wo füge ich den Code der Mausverfolgung ein?
| Beiträge: | 39 |
| Registriert am: | 20.08.2007 |
#9 von
wolf.andres
, 01.09.2007 01:56
Zitat von Agnes
Wo füge ich den Code der Mausverfolgung ein?
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
#10 von
Agnes
, 01.09.2007 13:39
Leider funktioniert das immer noch nicht.
Habe den Code:
<script type="text/javascript">
// Ripple Text by Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var msg = "Kleinhund - Liebhaber.";
var font = 'verdana';
var size = 12;
var colour = '#ff0000';
var delay = 0.35; // Must be less than 1
var speed = 40; // setTimeout - run speed
var yOffSet = 25;
var xOffSet = 25;
//---End user config.
var d = document;
msg = msg.split("");
var n = msg.length;
var y = 0;
var x = 0;
var yp = [];
var xp = [];
var yd = [];
var xd = [];
var temp = [];
var idx = document.getElementsByTagName('div').length;
var scy = 0;
var scx = 0;
var dom = (typeof window.pageYOffset == "number");
//Explorer only - double div anti scrollbar hack!
d.write('<div style="position:absolute;top:0px;left:0px;">'
+'<div style="position:relative">');
for (i = 0; i < n; i++){
d.write("<div id='letters"+(idx+i)+"' style='position : absolute;"
+"top : 0px;left : 0px;"
+"height : auto;width : "+size+"px;"
+"text-align : center;"
+"font : "+size+"px "+font+";color : "+colour+"'>"+msg[i]+"</div>");
}
document.write('</div></div>');
function scroll(){
if (dom){
scy = window.pageYOffset;
scx = window.pageXOffset;
}
else{
scy = d.documentElement.scrollTop||d.body.scrollTop;
scx = d.documentElement.scrollLeft||d.body.scrollLeft;
}
}
function mouse(e){
e = e||window.event;
y = yOffSet + ((e.pageY-scy)||e.clientY);
x = xOffSet + ((e.pageX-scx)||e.clientX);
}
function assign(){
for (i = 0; i < n; i++){
temp[i].top = Math.floor(yp[i]) + 'px';
temp[i].left = Math.floor(xp[i]) + (i*(size * 0.7)) + 'px';
}
}
function ripple(){
yp[0] = yd[0]+=((y+scy)-yd[0]) * delay;
xp[0] = xd[0]+=((x+scx)-xd[0]) * delay;
for (var i = 1; i < n; i++){
yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
}
scroll();
assign();
setTimeout(ripple,speed);
}
function init(){
for (i = 0; i < n; i++){
yp[i] = 0;
xp[i] = 0;
yd[i] = 0;
xd[i] = 0;
temp[i] = d.getElementById("letters"+(idx+i)).style;
}
ripple();
}
if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}
</script>
zwischen <head> + </head> eingefügt.
Habe einen anderen Text eingefügt ( Kleinhund - Liebhaber
Muss ich in den Code noch etwas verändern? Blicke da leider nicht so durch.
Zwischen <head> + </head> habe ich noch sowas stehen :
{{meta_refresh}}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<META NAME="keywords" CONTENT="{{hpmtext}}">
<META NAME="description" CONTENT="{{hpmtitle}}">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="{{link_css}}">
<link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss">
<TITLE>{{html_title}}</TITLE>
Muss das komplet weg ? Oder kann das da stehen bleiben?
Danke
| Beiträge: | 39 |
| Registriert am: | 20.08.2007 |
#11 von
wolf.andres
, 01.09.2007 15:14
He,
habe Dein komlettes Script unter "<TITLE>{{html_title}}</TITLE>" bei mir mal eingetragen.
Es funktioniert im IE7, FF, Opera und NS.
Hast Du bestimmte Funktionen deaktiviert, wie "Scripte" oder "ActiveX-Steuerelemente"?
Oder ganz einfach! - Die Seite neu aufgerufen?
Welchen Browser hast Du?
Bis dann
Wolf
| Beiträge: | 99 |
| Registriert am: | 04.02.2007 |
 | Forum Software von Xobor Einfach ein eigenes Forum erstellen |
