JavaScript DHTML/GUI Components/Animation
Содержание
- 1 Animate dynamic element h1 tag
- 2 Hello
- 3 Circular Animation
- 4 Straight-Line Animation
- 5 Red Alert!
- 5.1 Animation: eyes
- 5.2 Animation: fireworks
- 5.3 Animation: Lottery Number Picker and Statistics
- 5.4 Animation: mouse doodle
- 5.5 Animation on several images
- 5.6 Animation: pretty
- 5.7 Animation: Random Movement
- 5.8 Animation: snow
- 5.9 Animation: star
- 5.10 Animation: three eyes
- 5.11 Animation: trio
- 5.12 Animation: welcome message
- 5.13 Animation with JSTween
- 6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- 7 Welcome to the Hot Zone Web Site
- 8 Welcome to the Hot Zone Web Site
- 9 Simple Animation
- 10 Welcome to the Aviation Home Page!
- 11 Watch this text very carefully!
- 12 BOUNCE!
- 13 onFilterChange Event Handler
Animate dynamic element h1 tag
<source lang="html4strict">
/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan
- /
<html>
Hello
<script> // These variables set the parameters for our animation var id = "title"; // Name of the element to animate var numFrames = 30; // How many frames to display var interval = 100; // How long to display each frame var x0 = 100, y0 = 100; // The element"s starting position var x1 = 500, y1 = 500; // The element"s ending position var dx = (x1 - x0)/(numFrames-1); // Distance to move horizontally each frame var dy = (y1 - y0)/(numFrames-1); // Distance to move vertically each frame var frameNum = 0; // Frame we are at now var element = null; // The element to be animated // First, we find the element to be animated. Use a DOM-compliant technique // if the browser supports it, otherwise fall back on browser-specific code. if (document.getElementById) { // If this is a DOM-compliant browser
element = document.getElementById(id); // Use the DOM method
} else if (document.all) { // Otherwise, if the IE API is supported
element = document.all[id]; // Use the all[] array to find the element
} else if (document.layers) { // Else if the Netscape API is supported
element = document.layers[id]; // Use the layers[] array to get the element
} // If we found the element to animate using one of the techniques above, // start animating it by calling nextFrame() every interval milliseconds. if (element) {
var intervalId = setInterval("nextFrame()", interval);
} // This function is called repeatedly to display each frame of the animation. // It moves the element using either the DOM API for setting CSS style // properties, or, if the browser does not support that API, it uses // the Netscape Layer API. function nextFrame() {
if (element.style) {
// If the browser supports it, move the element by setting CSS
// style properties. Note the inclusion of the units string.
element.style.left = x0 + dx*frameNum + "px";
element.style.top = y0 + dy*frameNum + "px";
}
else {
// Otherwise, assume that element is a Layer, and move it by
// setting its properties. We could also use element.moveTo().
element.left = x0 + dx*frameNum;
element.top = y0 + dy*frameNum;
}
// Increment the frame number, and stop if we"ve reached the end.
if (++frameNum >= numFrames) clearInterval(intervalId);
} </script> </html>
</source>
Animation along a Circle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title>Circle Animation </title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px}
</style> <script language="JavaScript" type="text/javascript"> // animation object holds numerous properties related to motion var anime = new Object(); // initialize default anime object function initAnime() {
anime = {elemID:"",
xStart:0,
yStart:0,
xCurr:0,
yCurr:0,
next:1,
pts:1,
radius:1,
interval:null
};
} // stuff animation object with necessary explicit and calculated values function initCircAnime(elemID, startX, startY, pts, radius) {
initAnime();
anime.elemID = elemID;
anime.xCurr = anime.xStart = startX;
anime.yCurr = anime.yStart = startY;
anime.pts = pts;
anime.radius = radius;
// set element"s start position
document.getElementById(elemID).style.left = startX + "px";
document.getElementById(elemID).style.top = startY + "px";
// start the repeated invocation of the animation
anime.interval = setInterval("doCircAnimation()", 10);
} function doCircAnimation() {
if (anime.next < anime.pts) {
var x = anime.xCurr +
Math.round(Math.cos(anime.next * (Math.PI/(anime.pts/2))) * anime.radius);
var y = anime.yCurr +
Math.round(Math.sin(anime.next * (Math.PI/(anime.pts/2))) * anime.radius);
document.getElementById(anime.elemID). style.left = x + "px";
document.getElementById(anime.elemID). style.top = y + "px";
anime.xCurr = x;
anime.yCurr = y;
anime.next++;
} else {
document.getElementById(anime.elemID).style.left = anime.xStart + "px";
document.getElementById(anime.elemID).style.top = anime.yStart + "px";
clearInterval(anime.interval);
}
} </script> </head> <body style="height:400px;" onload="initAnime()">
Circular Animation
<form> <input type="button" value="Circle" onclick="initCircAnime("block", 400, 200, 36, 20)"> </form>
</body> </html>
</source>
Animation along Straight Line
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title>Recipe 13.9</title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <script language="JavaScript" type="text/javascript"> // animation object holds numerous properties related to motion var anime; // initialize default anime object function initAnime() {
anime = {elemID:"",
xCurr:0,
yCurr:0,
xTarg:0,
yTarg:0,
xStep:0,
yStep:0,
xDelta:0,
yDelta:0,
xTravel:0,
yTravel:0,
vel:1,
pathLen:1,
interval:null
};
} // stuff animation object with necessary explicit and calculated values function initSLAnime(elemID, startX, startY, endX, endY, speed) {
initAnime();
anime.elemID = elemID;
anime.xCurr = startX;
anime.yCurr = startY;
anime.xTarg = endX;
anime.yTarg = endY;
anime.xDelta = Math.abs(endX - startX);
anime.yDelta = Math.abs(endY - startY);
anime.vel = (speed) ? speed : 1;
// set element"s start position
document.getElementById(elemID).style.left = startX + "px";
document.getElementById(elemID).style.top = startY + "px";
// the length of the line between start and end points
anime.pathLen = Math.sqrt((Math.pow((startX - endX), 2)) +
(Math.pow((startY - endY), 2)));
// how big the pixel steps are along each axis
anime.xStep = parseInt(((anime.xTarg - anime.xCurr) / anime.pathLen) * anime.vel);
anime.yStep = parseInt(((anime.yTarg - anime.yCurr) / anime.pathLen) * anime.vel);
// start the repeated invocation of the animation
anime.interval = setInterval("doSLAnimation()", 10);
} // calculate next steps and assign to style properties function doSLAnimation() {
if ((anime.xTravel + anime.xStep) <= anime.xDelta &&
(anime.yTravel + anime.yStep) <= anime.yDelta) {
var x = anime.xCurr + anime.xStep;
var y = anime.yCurr + anime.yStep;
document.getElementById(anime.elemID).style.left = x + "px";
document.getElementById(anime.elemID).style.top = y + "px";
anime.xTravel += Math.abs(anime.xStep);
anime.yTravel += Math.abs(anime.yStep);
anime.xCurr = x;
anime.yCurr = y;
} else {
document.getElementById(anime.elemID).style.left = anime.xTarg + "px";
document.getElementById(anime.elemID).style.top = anime.yTarg + "px";
clearInterval(anime.interval);
}
}
</script> </head> <body style="height:400px;" onload="initAnime()">
Straight-Line Animation
<form> <input type="button" value="Left-to-Right" onclick="initSLAnime("block", 100, 200, 500, 200, 5)"> <input type="button" value="Diagonal" onclick="initSLAnime("block", 100, 200, 500, 500, 20)"> </form>
</body> </html>
</source>
Animation based on DIV with color flash
<source lang="html4strict">
/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan
- /
<html>
Red Alert!
The Web server is under attack!<script> var e = document.getElementById("urgent"); // Get the element object var colors = ["white", "yellow", "orange", "red"] // Colors to cycle through var nextColor = 0; // Position in the cycle // Evaluate the following expression every 500 milliseconds. // This animates the background color of the DIV element. setInterval("e.style.backgroundColor=colors[nextColor++%colors.length];", 500); </script> </html>
</source>
Animation: eyes
<source lang="html4strict">
/*
Paste this link to where you want the eyes to appear in your page.
MAKE SURE YOU *DO NOT* PLACE IT INSIDE ANY<script type="text/javascript" src="staticeyes.js"></script>
Make sure that these files are in/uploaded to the same directory/folder as the web page using the script: staticeyes.js eye.gif pupils.gif
You can paste <script type="text/javascript" src="staticeyes.js"></script> as many times as you like in to the same page.
However, if you want each set to follow a different style sheet, open and study "more.zip".
- /
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Static Eyes</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> </head> <body>
DON"T FORGET - DO NOT PUT INSIDE ANY OTHER DIV!
<script type="text/javascript" > //Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript if ((document.getElementById) && window.addEventListener || window.attachEvent){ (function(){ var e_img = new Image(); e_img.src = "eye.gif"; var p_img = new Image(); p_img.src = "pupils.gif"; var d = document; var pix = "px"; var idx = document.images.length; if (document.getElementById("cont"+idx)) idx++; var eyeballs = ""; var pupil1 = ""; var pupil2 = "";
d.write("+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>" +"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>" +"<\/div><\/div>"); function watchTheMouse(y,x){ var osy = eyeballs.offsetTop; var osx = eyeballs.offsetLeft; var c1y = osy + 17; var c1x = osx + 17; var c2y = osy + 17; var c2x = osx + 52; var dy1 = y - c1y; var dx1 = x - c1x; var d1 = Math.sqrt(dy1*dy1 + dx1*dx1); var dy2 = y - c2y; var dx2 = x - c2x; var d2 = Math.sqrt(dy2*dy2 + dx2*dx2); var ay1 = y - c1y; var ax1 = x - c1x; var angle1 = Math.atan2(ay1,ax1)*180/Math.PI; var ay2 = y - c2y; var ax2 = x - c2x; var angle2 = Math.atan2(ay2,ax2)*180/Math.PI; var dv = 1.7; var onEyeBall1 = (d1 < 17)?d1/dv:10; var onEyeBall2 = (d2 < 17)?d2/dv:10; pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix; pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix; pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix; pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix; } function mouse(e){ var y,x; if (!e) e = window.event;
if (typeof e.pageY == "number"){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
} watchTheMouse(y,x); } function init(){ eyeballs = d.getElementById("eyblls"+idx); pupil1 = d.getElementById("ppl1"+idx).style; pupil2 = d.getElementById("ppl2"+idx).style; } 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);
} })(); }//End. </script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/staticeyes.zip">staticeyes.zip( 8 k)</a>
Animation: fireworks
<source lang="html4strict">
//Fireworks - http://www.btinternet.ru/~kurt.grigg/javascript /* Paste this js-link between the <body> </body> tags of your page HTML. <script type="text/javascript" src="fireworks.js"></script>
If you want more just paste the same js-link repeatedly: Example:------------- <body> <script type="text/javascript" src="fireworks.js"></script> <script type="text/javascript" src="fireworks.js"></script> <script type="text/javascript" src="fireworks.js"></script> <script type="text/javascript" src="fireworks.js"></script> </body>
However, don"t go too mad with it. IE6 and Opera 7 can handle quite a few but not so with Netscape 7.1 or Mozilla Firefox. 2 is about their limit even on a modern PC - Pentium 4 at time of writting.
- /
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Fireworks</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css">
</style> </head> <body> <script type="text/javascript"> //Fireworks - http://www.btinternet.ru/~kurt.grigg/javascript if ((document.getElementById) && window.addEventListener || window.attachEvent){ (function(){ var showerCol = new Array("#000000","#ff0000","#000000","#00ff00","#ff00ff","#ffffff","#ffa500","#000000","#fff000"); var launchCol = new Array("#ffa500","#00ff00","#ffaaff","#fff000","#ffffff"); var launchColour = "#00ff00"; var rs = 30; var y = 200; var x = 200; var h; var w; var xs = 190; var t = null; var ss = 1; var e = 360/14; var f = new Array(); var c1 = -1; var c2 = 5; var r; var pix = "px"; var strictmod = ((document.rupatMode) && document.rupatMode.indexOf("CSS") != -1); var o; var domWw = (typeof window.innerWidth == "number"); var domSy = (typeof window.pageYOffset == "number"); var n = 14; var idx = 1;
for (i = 0; i < n; i++){
if ( document.getElementById(idx+i) ){
idx = (idx+=(n));
}
}
for (i = 0; i < n; i++){
document.write("}
if (domWw) r = window; else{
if (document.documentElement &&
typeof document.documentElement.clientWidth == "number" &&
document.documentElement.clientWidth != 0)
r = document.documentElement;
else{
if (document.body &&
typeof document.body.clientWidth == "number")
r = document.body;
}
}
function scrl(yx){ var y,x; if (domSy){
y = r.pageYOffset; x = r.pageXOffset; }
else{
y = r.scrollTop; x = r.scrollLeft; }
return (yx == 0)?y:x; }
function wndwsz(){ if (domWw){
h = r.innerHeight;
w = r.innerWidth;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
o = (w >= h)?h:w; }
function rst(){ c1 = 0; launchColour = launchCol[Math.floor(Math.random() * launchCol.length)]; xs = Math.round(100+Math.random() * (o/4)); y = xs + Math.round(Math.random() * (h-(xs*2.2))) + scrl(0); x = xs + Math.round(Math.random() * (w-(xs*2.2))) + scrl(1); ss = 1; for (i=0; i < n; i++){
f[i].backgroundColor = launchColour; f[i].width = ss + pix; f[i].height = ss + pix; f[i].fontSize = ss + pix;
} dsply(); }
function dsply(){ c1 += c2; t = setTimeout(dsply,rs); for (i =0; i < n; i++){ f[i].top = y + xs * Math.sin(i*e*Math.PI/180) * Math.sin(c1/100) + pix; f[i].left= x + xs * Math.cos(i*e*Math.PI/180) * Math.sin(c1/100) + pix;
if (c1 > 100){
ss = (xs < 150)?1:Math.round(1+Math.random()*2);
f[i].backgroundColor = showerCol[Math.floor(Math.random()*showerCol.length)];
f[i].width = ss + pix;
f[i].height = ss + pix;
f[i].fontSize = ss + pix;
}
} if (c1 > 160){
clearTimeout(t); rst();
} }
function init(){ wndwsz(); for (i = 0; i < n; i++){ f[i] = document.getElementById(idx+i).style; } var strt = Math.floor(500+Math.random()*2000); setTimeout(dsply,strt); }
if (window.addEventListener){
window.addEventListener("resize",wndwsz,false);
window.addEventListener("load",init,false);
} else if (window.attachEvent){
window.attachEvent("onresize",wndwsz);
window.attachEvent("onload",init);
} })(); } //End. </script> </body> </html>
</source>
Animation: Lottery Number Picker and Statistics
<source lang="html4strict">
/* "lottostats.js" and "lottostats.css"
- MUST* be in/uploaded to the same directory/folder as the web page you
want the game to appear in.
2 Steps to get game in to your web page:
1: Paste the "lottostats.css" link between the <head> tags of your
page HTML. <link rel="stylesheet" href="lottostats.css" type="text/css">
2: Paste the "lottostats.js" link to where you want the game to appear in your page.
This *MUST* be between the <body> tags of your HTML. It can be placed in tables and divs etc. <script type="text/javascript" src="lottostats.js"></script>
To alter the lottery format, right click on the "lottostats.js" icon and click Edit.
At the top you will see:
YourLotteryName = "UK National Lottery";
numbers = 6; //How many numbers/balls.
range = 49; //Random range.
Change to what ever - example:
YourLotteryName = "Jane"s Texas Lottery"; numbers = 8; //How many numbers/balls. range = 100; //Random range.
To alter the game colours, double click on "lottostats.css".
- AVOID* changing anything except for the colours! Everything
else is for alignment, even changing the font size will mess up the display!
- /
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lottery Number Picker & Statistics</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css">
</style> </head> <body>
<script type="text/javascript"> /* Configure your lottery here. Lottery name, format and display size is automatic. Be aware of other peoples screen size if using a large format!
- /
YourLotteryName="UK National Lottery"; numbers=6; //How many numbers/balls. range=49; //Random range. //Nothing needs altering past here. var doesTheBasics=(typeof document.body == "object" && document.rupatMode != undefined); var doesWhatsNeeded=((doesTheBasics) && typeof document.body.nodeName == "string" && typeof document.body.innerHTML == "string"); if (doesWhatsNeeded){ if (numbers > range){ alert("Oops! You can"t get "+numbers+" random numbers from 1 to "+range+". Check configuration!"); //Repeated in main function just in case. } colNums=1; colCount=0; for (i=0; i < range; i++){ colCount++; if (colCount > 9){
colNums++; colCount=0; }
} var dispWidth; if (colNums < 6) dispWidth = 342; else dispWidth = 342 + ((colNums-5)*70); var tabWidth=(dispWidth < 500)?500:dispWidth+50; var target; var speed; var draw_count=0; var best=new Array(); var timer=null; var box=new Array(); var y=new Array(); var x=new Array(); var vy=0; var vx=0; //counters. var c1=0; var c2=-1; var c3=new Array(); var c4=new Array(); var c5=-1; var cols=new Array("#ffffff","#00ff00","#ffa000","#ff00ff","#ff0000","#fff000"); var v1=new Array(); var fnshd=false; var playing=false; var ve=0; var vo=0; var best_num=""; var worst_num=""; var msy = 0; var msx = 0;
function checkStuff(){ if (fnshd){
alert("Click Reset button to play again!");
return false;
} if (playing){
alert("Already playing!\nClick Reset button if you want to restart.");
return false;
} tmp_t=document.getElementById("t_get"); target=tmp_t.options[tmp_t.selectedIndex].value; tmp_s=document.getElementById("t_spd"); speed=tmp_s.options[tmp_s.selectedIndex].value; if (!parseInt(target)){
alert("Select a target to reach!");
return false;
} if (!parseInt(speed)){
alert("Select a draw speed!");
return false;
} v2=parseInt(target/5); for (i=0; i <= target; i+=v2){
if (parseInt(i)){
c2++;
}
v1[c2]=i;
}
lotto(); }
function mouse(e){ if (!e) e = window.event;
if (typeof e.pageY == "number"){
msy = e.pageY;
msx = e.pageX;
}
else{
ref = (document.rupatMode &&
document.rupatMode.indexOf("CSS") != -1)
?document.documentElement:document.body;
msy = e.clientY+130+ref.scrollTop;
msx = e.clientX;
}
} document.onmousedown=mouse;
function seeInfo(x){ visState=(x==1)?"visible":"hidden"; document.getElementById("info").style.visibility = visState; document.getElementById("info").style.top = msy + "px"; document.getElementById("info").style.left = msx + "px"; }
function numsort(n1,n2) { n1 = parseInt(n1,10); n2 = parseInt(n2,10); if (n1 < n2) v =- 1; else if (n1 > n2) v = 1; else v = 0; return v; }
function lotto(){ if (numbers > range){ alert("Oops! You can"t get "+numbers+" random numbers from 1 to "+range+". Check configuration!"); return false; } playing=true; draw_count++; nums=new Array(); for (i=0; i < numbers; i++){ r_nums=parseInt(1+Math.random()*range);
for (j=0; j < numbers; j){
if (r_nums!=nums[j]) j++;
else{
r_nums=parseInt(1+Math.random()*range);
j=0;
}
}
nums[i]=r_nums; } for (i=0; i < numbers; i++){
c3[nums[i]-1]++;
box[nums[i]-1].firstChild.data = c3[nums[i]-1];
for (j=0; j < v1.length; j++){
if (c3[nums[i]-1] == v1[j]){
c4[nums[i]-1]++;
}
}
box[nums[i]-1].style.color = cols[c4[nums[i]-1]];
if (c3[nums[i]-1] == target){
c5++;
best[c5]=nums[i];
}
} timer=setTimeout("lotto()",speed); if (c5 >= numbers-1){
clearTimeout(timer); stats(); }
}
function oddOrEven(n){ if (n%2 == 0) ve++; if (n%2 == 1) vo++; a_ve = ve/best.length; a_vo = vo/best.length; b_ve = a_ve*100; b_vo = a_vo*100; }
function percentageTidy(x){ if (Math.round(x) > x) z=Math.round(x); else if (Math.round(x) < x) z=Math.floor(x); else z=x; return z; }
function rst(){ window.location.reload(); }
function stats(){ best.sort(numsort); best_nums=""; for (i=0; i < best.length; i++){
best_nums+=(best[i]+" ");
} for (i=0; i < best.length; i++){
oddOrEven(best[i]);
} tmp1=new Array(); tmp2=new Array(); for (i=0; i < range; i++){
tmp1[i]=c3[i]+"="+(1+i);
} tmp1.sort(numsort); c6=-1; c7=-1; ta_best_num=new Array(); t_best_num=tmp1[tmp1.length-1]; ta_worst_num=new Array(); t_worst_num=tmp1[0]; for (i=0; i < tmp1.length; i++){
if (tmp1[i].substring(0,tmp1[i].indexOf("=")) == t_best_num.substring(0,t_best_num.indexOf("=")) ){
c6++;
ta_best_num[c6]=tmp1[i].substring(tmp1[i].indexOf("=")+1,tmp1[i].length);
}
ta_best_num.sort(numsort);
if (tmp1[i].substring(0,tmp1[i].indexOf("=")) == t_worst_num.substring(0,t_worst_num.indexOf("=")) ){
c7++;
ta_worst_num[c7]=tmp1[i].substring(tmp1[i].indexOf("=")+1,tmp1[i].length);
}
} ta_worst_num.sort(numsort); for (i=0; i < ta_best_num.length; i++){
best_num+=(ta_best_num[i]+" ");
} for (i=0; i < ta_worst_num.length; i++){
worst_num+=(ta_worst_num[i]+" ");
}
v1a=(parseInt(c5)+1)-numbers;
v1b=parseInt(v1a)+1;
v1=(parseInt(c5)+1 > numbers)?"
\("+v1b+" numbers reached target in the final draw resulting in "+(parseInt(c5)+1)+" instead of the required "+numbers+"<\/span>\)":"";
v2=(c6 > 0)?" were equally picked most.":"";
v3=(c7 > 0)?" were equally picked least.":"";
e1=(ve==0||ve>1)?"numbers":"number";
e2=(ve==0||ve>1)?"were":"was";
o1=(vo==0||vo>1)?"numbers":"number";
o2=(vo==0||vo>1)?"were":"was";
other="Other:
"+draw_count+"<\/span> draws were generated.
"+ve+"<\/span> "+e1+", "+percentageTidy(b_ve)+"\%<\/span>, "+e2+" even.
"+vo+"<\/span> "+o1+", "+percentageTidy(b_vo)+"\%<\/span>, "+o2+" odd.";
document.getElementById("s1").innerHTML = "Best numbers: "+best_nums+"<\/span>"+v1;
document.getElementById("s2").innerHTML = "Best number: "+best_num+"<\/span>"+v2;
document.getElementById("s3").innerHTML = "Worst number: "+worst_num+"<\/span>"+v3;
document.getElementById("s4").innerHTML = other;
fnshd=true;
}
"
+"<p style="font-size:14px;margin-top:0px">Lottery Number Picker & Statistics<\/p>"
+"<p>For "+YourLotteryName+"<\/span> \("+numbers+"<\/span> from 1<\/span> to "+range+"<\/span>\)<\/p>"
+"<p>To play, select a target to reach, draw speed, then click the play button.<\/p>"
+"<p style="padding-bottom:10px">"
+"<select id="t_get" class="buttons">"
+"<option>Target"
+"<option value=10>10"
+"<option value=50>50"
+"<option value=100>100"
+"<option value=500>500"
+"<option value=1000>1000"
+"<option value=5000>5000"
+"<\/select>"
+" \;<select id="t_spd" class="buttons">"
+"<option>Draw Speed"
+"<option value=10>fastest"
+"<option value=30>fast"
+"<option value=50>medium"
+"<option value=500>slow"
+"<option value=1000>slowest"
+"<\/select>"
+" \;<input type="button" class="buttons" value="Play" onclick="checkStuff();this.blur()"> \;<input type="button" class="buttons" value="Reset" onclick="rst();this.blur()">"
+"<\/p>"
+"<\/p>"
+" +"<input type="button" id="xy" class="buttons" style="width:50px;color:red" value="Info!" onclick="seeInfo(1)">"
+"<\/div>"
for (i=0; i < range; i++){
c1++;
vy+=20;
y[i]=vy;
x[i]=vx;
box[i]=document.getElementById("nums"+i);
c3[i]=0;
c4[i]=0;
}
+"<\/div><\/div>");//End main div.
Grigg_1=new Array(100,111,99,117,109,101,110,116,46,119,114,105,116,101,40,39,60,100,105,118,32,105,100,61,34,105,110,102,111,34,32,99,108,97,115,115,61,34,119,104,97,116,105,116,100,111,34,32,115,116,121,108,101,61,34,116,111,112,58,48,112,120,59,108,101,102,116,58,48,112,120,59,118,105,115,105,98,105,108,105,116,121,58,104,105,100,100,101,110,34,62,60,100,105,118,32,115,116,121,108,101,61,34,112,111,115,105,116,105,111,110,58,97,98,115,111,108,117,116,101,59,116,111,112,58,49,48,112,120,59,108,101,102,116,58,49,48,112,120,34,62,60,105,110,112,117,116,32,116,121,112,101,61,34,98,117,116,116,111,110,34,32,99,108,97,115,115,61,34,98,117,116,116,111,110,115,34,32,115,116,121,108,101,61,34,119,105,100,116,104,58,53,48,112,120,59,99,111,108,111,114,58,114,101,100,34,32,118,97,108,117,101,61,34,67,108,111,115,101,33,34,32,111,110,99,108,105,99,107,61,34,115,101,101,73,110,102,111,40,48,41,34,62,60,92,47,100,105,118,62,60,112,32,115,116,121,108,101,61,34,116,101,120,116,45,97,108,105,103,110,58,99,101,110,116,101,114,34,62,72,111,119,32,73,116,32,87,111,114,107,115,60,92,47,112,62,60,112,62,73,102,32,110,117,109,98,101,114,32,49,52,32,119,97,115,32,116,104,101,32,104,105,103,104,101,115,116,32,112,105,99,107,101,100,32,108,111,116,116,101,114,121,32,98,97,108,108,32,111,117,116,32,49,44,48,48,48,32,99,111,110,115,101,99,117,116,105,118,101,32,108,111,116,116,101,114,121,32,100,114,97,119,115,44,32,105,116,32,119,111,117,108,100,32,111,98,118,105,111,117,115,108,121,32,109,97,107,101,32,115,101,110,115,101,32,116,111,32,104,97,118,101,32,110,117,109,98,101,114,32,49,52,32,97,115,32,111,110,101,32,111,102,32,121,111,117,114,32,99,104,111,115,101,110,32,108,111,116,116,101,114,121,32,110,117,109,98,101,114,115,46,60,92,47,112,62,60,112,62,84,104,105,115,32,112,114,111,103,114,97,109,32,119,105,108,108,32,103,105,118,101,32,121,111,117,32,116,104,97,116,32,92,39,110,117,109,98,101,114,32,49,52,92,39,32,97,108,111,110,103,32,119,105,116,104,32,116,104,101,32,115,101,99,111,110,100,44,32,116,104,105,114,100,44,32,102,111,114,116,104,32,101,116,99,44,32,98,101,115,116,32,112,101,114,102,111,114,109,105,110,103,32,110,117,109,98,101,114,115,46,60,92,47,112,62,60,112,62,73,116,32,119,111,114,107,115,32,98,121,32,114,101,112,101,97,116,101,100,108,121,32,103,101,110,101,114,97,116,105,110,103,32,114,97,110,100,111,109,32,108,111,116,116,101,114,121,32,100,114,97,119,115,32,105,110,32,116,104,101,32,115,112,101,99,105,102,105,101,100,32,102,111,114,109,97,116,44,32,105,110,32,116,104,105,115,32,99,97,115,101,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,114,97,110,103,105,110,103,32,102,114,111,109,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,49,60,92,47,115,112,97,110,62,32,116,111,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,114,97,110,103,101,43,39,60,92,47,115,112,97,110,62,46,60,92,47,112,62,60,112,62,69,97,99,104,32,116,105,109,101,32,97,32,92,40,110,117,109,98,101,114,32,92,45,32,108,111,116,116,101,114,121,32,98,97,108,108,92,41,32,105,115,32,112,105,99,107,101,100,44,32,105,116,32,105,115,32,99,111,117,110,116,101,100,32,97,110,100,32,105,116,115,32,92,39,112,111,112,117,108,97,114,105,116,121,92,39,32,112,114,111,103,114,101,115,115,32,105,115,32,115,104,111,119,110,32,105,110,32,116,104,101,32,115,116,97,116,115,32,100,105,115,112,108,97,121,46,60,47,112,62,60,112,62,87,104,101,110,32,116,104,101,32,102,105,114,115,116,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,114,101,97,99,104,32,97,32,115,101,116,32,116,97,114,103,101,116,44,32,116,104,101,32,112,114,111,103,114,97,109,32,119,105,108,108,32,115,116,111,112,32,116,104,101,110,32,100,105,115,112,108,97,121,32,116,104,101,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,97,108,111,110,103,32,119,105,116,104,32,118,97,114,105,111,117,115,32,115,116,97,116,105,115,116,105,99,115,46,32,67,111,117,108,100,32,116,104,101,115,101,32,110,117,109,98,101,114,115,32,119,105,110,32,116,104,101,32,114,101,97,108,32,108,111,116,116,101,114,121,63,60,92,47,112,62,60,112,62,68,111,32,121,111,117,32,119,97,110,116,32,116,104,105,115,32,102,114,101,101,32,103,97,109,101,32,102,111,114,32,121,111,117,114,32,119,101,98,32,112,97,103,101,63,32,73,116,32,99,97,110,32,98,101,32,99,117,115,116,111,109,105,115,101,100,32,102,111,114,32,109,111,115,116,32,108,111,116,116,101,114,121,32,102,111,114,109,97,116,115,46,60,112,62,60,97,32,99,108,97,115,115,61,34,107,106,103,34,32,104,114,101,102,61,34,104,116,116,112,58,47,47,119,119,119,46,98,116,105,110,116,101,114,110,101,116,46,99,111,109,47,126,107,117,114,116,46,103,114,105,103,103,47,106,97,118,97,115,99,114,105,112,116,47,90,105,112,115,47,108,111,116,116,111,115,116,97,116,115,46,122,105,112,34,62,67,108,105,99,107,32,104,101,114,101,32,116,111,32,100,111,119,110,108,111,97,100,32,102,114,111,109,32,75,117,114,116,92,39,115,32,68,72,84,77,76,60,92,47,97,62,60,92,47,112,62,60,92,47,112,62,60,92,47,100,105,118,62,39,41,59);
var the_code;
dum="";
Grigg_2=new Array();
for (i=0; i < Grigg_1.length; i++){
Grigg_2[i]=String.fromCharCode(Grigg_1[i]);
the_code=dum+=Grigg_2[i];
}
eval(the_code);
}
</script>
</body>
</html>
//Mouse Doodle 2 - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link between the body tags of your page.
<script type="text/javascript" src="mousedoodle2.js"></script>
To edit, right click on the mousedoodle2.js file icon and choose edit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mouse Doodle 2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Mouse Doodle 2 - http://www.btinternet.ru/~kurt.grigg/javascript
if ((typeof window.event) &&
window.attachEvent &&
document.getElementById &&
document.firstChild &&
document.firstChild.filters){
(function(){
var colours = new Array("#ff0000","#00ff00","#ffffff","#ff00ff","#ffff00","#00aaff","#ffa500");
var n = colours.length;
var dy = 0;
var dx = 0;
var ry = 0;
var rx = 0;
var v1 = 0.08;
var v2 = 0;
var y = 0;
var x = 0;
var ref = [];
var pulseCounter = [];
var pulsePath = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,30,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
var pulse = [];
var d = document;
var ref2;
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref2 = d.documentElement;
else{
}
var idx = document.getElementsByTagName("div").length;
var pix = "px";
for (i = 0; i < n; i++){
}
document.write("<\/div><\/div>");
for (i = 0; i < n; i++){
ref[i] = document.getElementById("lights"+(idx+i)).style;
pulseCounter[i] = i * 4;
}
function mouse(){
y = window.event.clientY;
x = window.event.clientX - 16;
}
document.attachEvent("onmousemove",mouse);
function stars(){
for (i = 0; i < n; i++){
}
v2 += v1;
document.getElementById("con"+idx).style.top = ref2.scrollTop + pix;
}
function delay(){
ry = dy += (y-dy) * 0.05;
rx = dx += (x-dx) * 0.05;
stars();
setTimeout(delay,40);
}
delay();
})();
}
</script>
</body>
</html>
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
<img name="animation" src="images/0.gif">
<script>
// Create a bunch of off-screen images, and pre-fetch the "frames"
// of the animation into them so that they"re cached when we need them.
var aniframes = new Array(10);
for(var i = 0; i < 10; i++) {
}
var frame = 0; // The frame counter: keeps track of current frame.
var timeout_id = null; // Allows us to stop the animation with clearTimeout()
// This function performs the animation. Call it once to start.
// Note that we refer to the on-screen image using its name attribute.
function animate() {
}
</script>
<form>
</form>
//Pretty - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link betewwn the body tags of your page.
<script type="text/javascript" src="pretty.js"></script>
To edit, right click on the pretty.js file icon and choose edit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pretty</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style>
body{
background-color : black;
}
</style>
</head>
<body>
<script type="text/javascript">
//Pretty - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var colours = new Array("#ff0000","#00ff00"); //Add as many colours as you like!
var numberOfDots = 14;
var setTimeOutSpeed = 40; //Timeout speed!
var followMouseSpeed = 0.03; //Must be less than 1 & greater than 0!
var twistAndSpinSpeed = 0.04;
var colourChangeSpeed = 2;
//End config.
var idx = document.getElementsByTagName("div").length;
for (i = 0; i < numberOfDots; i++){
}
var h,y,ref;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi = 3.1415/180;
var buff = 74;
var the_dots = [];
var ev = 360/numberOfDots;
var step2 = 1;
var pix = "px";
var y = 0;
var x = 0;
var ry = 0;
var rx = 0;
var dy = 0;
var dx = 0;
var sy = 0;
var sx = 0;
var scy = 0;
var scx = 0;
var counter1 = idx;
var counter2 = 0;
var counter3 = 0;
var step1 = 0;
if (followMouseSpeed <= 0 || followMouseSpeed >= 1){
}
if (domWw) ref = window;
else{
}
function winSize(){
var mozBar = ((domWw) && ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
}
function scrolled(){
if (domWw){
else{
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
}
function colourStep(){
counter1 += step2;
if (counter1 >= numberOfDots+idx){
}
if (counter2 == colours.length){
}
scrolled();
document.getElementById("dvs"+counter1).style.backgroundColor = colours[counter2];
}
function DoItAll(){
counter3++;
step1 -= twistAndSpinSpeed;
dy = ry+=(y-ry)*followMouseSpeed;
dx = rx+=(x-rx)*followMouseSpeed;
if (ry >= h-buff){
}
if (ry <= buff){
}
if (rx >= w-buff){
}
if (rx <= buff){
}
if (counter3 > colourChangeSpeed){
}
for (i = 0; i < numberOfDots; i++){
}
setTimeout(DoItAll,setTimeOutSpeed);
}
function init(){
for (i = 0; i < numberOfDots; i++){
}
winSize();
DoItAll();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
//Random Movement - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this js-link between the <body> </body> tags of your page HTML.
<script type="text/javascript" src="randommovement.js"></script>
Make sure that randommovement.js and pooh.gif or any other image you
want to use are in/uploaded to the same directory/folder as the web
page using the script.
If you want more than one just paste the same js-link repeatedly:
Example:-------------
<body>
<script type="text/javascript" src="randommovement.js"></script>
<script type="text/javascript" src="randommovement.js"></script>
<script type="text/javascript" src="randommovement.js"></script>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Random Movement</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Random Movement - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var rm_img = new Image();
rm_img.src = "http://www.wbex.ru/style/logo.png";
var imgh = 163;
var imgw = 156;
var timer = 40; //setTimeout speed.
var min = 1; //slowest speed.
var max = 5; //fastest speed.
var idx = 1;
idx = parseInt(document.images.length);
if (document.getElementById("pic"+idx)) idx++;
document.write(stuff);
var h,w,r,temp;
var d = document;
var y = 2;
var x = 2;
var dir = 45; //direction.
var acc = 1; //acceleration.
var newacc = new Array(1,0,1);
var vel = 1; //initial speed.
var sev = 0;
var newsev = new Array(1,-1,2,-2,0,0,1,-1,2,-2);
//counters.
var c1 = 0; //time between changes.
var c2 = 0; //new time between changes.
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh - imgh;
w = rw - imgw;
}
else{
h = r.clientHeight - imgh;
w = r.clientWidth - imgw;
}
}
function scrl(yx){
var y,x;
if (domSy){
else{
return (yx == 0)?y:x;
}
function newpath(){
sev = newsev[Math.floor(Math.random()*newsev.length)];
acc = newacc[Math.floor(Math.random()*newacc.length)];
c2 = Math.floor(20+Math.random()*50);
}
function moveit(){
var vb,hb,dy,dx,curr;
if (acc == 1) vel +=0.05;
if (acc == 0) vel -=0.05;
if (vel >= max) vel = max;
if (vel <= min) vel = min;
c1++;
if (c1 >= c2){
}
curr = dir+=sev;
dy = vel * Math.sin(curr*Math.PI/180);
dx = vel * Math.cos(curr*Math.PI/180);
y+=dy;
x+=dx;
//horizontal-vertical bounce.
vb = 180-dir;
hb = 0-dir;
//Corner rebounds?
if ((y < 1) && (x < 1)){y = 1; x = 1; dir = 45;}
if ((y < 1) && (x > w)){y = 1; x = w; dir = 135;}
if ((y > h) && (x < 1)){y = h; x = 1; dir = 315;}
if ((y > h) && (x > w)){y = h; x = w; dir = 225;}
//edge rebounds.
if (y < 1) {y = 1; dir = hb;}
if (y > h) {y = h; dir = hb;}
if (x < 1) {x = 1; dir = vb;}
if (x > w) {x = w; dir = vb;}
//Assign it all to image.
temp.style.top = y + scrl(0) + pix;
temp.style.left = x + scrl(1) + pix;
setTimeout(moveit,timer);
}
function init(){
temp = document.getElementById("pic"+idx);
winsize();
moveit();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
<p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p>
<p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p>
<p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p>
<p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p><p>`</p>
</body>
</html>
//Snow - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link as the last thing on your page, just before </body></html>
<script type="text/javascript" src="snow.js"></script>
To edit, right click on the snow.js file icon and choose edit.
Make sure the snow.js file is in/uploaded to the same directory/folder as
the web page using it!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Snow</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Snow - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var num = 30; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
//End.
var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName("div").length;
if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;
for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);
currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}
function scrl(yx){
var y,x;
if (domSy){
else{
return (yx == 0)?y:x;
}
function snow(){
var dy,dx;
for (i = 0; i < num; i++){
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
}
snow();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
/*
Paste this js link straight after the opening body tag. This should make the stars appear behind everything else on the page.
<script type="text/javascript" src="starfield.js"></script>
To edit, right click on the starfield.js file icon and choose edit.
Smooth animation depends on setTimeout speed, number of stars, computer spec and the
browser used.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Starfield</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body{
background-color : #000000;
}
</style>
</head>
<body>
<script type="text/javascript">
//Starfield - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var numberOfStars = 40;
var starSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 30;
//End config.
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName("div").length;
var zip = [];
var pix = "px";
//Floor or round anything possible for Netscape.
//Slashes CPU strain in Opera too.
for (i = 0; i < numberOfStars; i++){
}
if (domWw) ref = window;
else{
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = starSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfStars; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfStars; i++){
}
animate();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
/*
Although you can paste
<script type="text/javascript" src="staticeyes.js"></script>
as many times as you like in the same page, you"ll need to
alter them if you want each one to use a different style.
Example: you want 3 sets of eyes on your page but need
different styles for each !
Right click on the "staticeyes.js" icon and choose edit,
Notepad or whatever will open showing the script.
Look for this line, near the top:
d.write("<div id="cont"+idx+"" class="eyestyle" style.......
You need to alter just class="eyestyle" to something
like class="eyestyle1"
Now click on "File" then "Save As". In the "file name" box
you will see: "staticeyes.js"
CHANGE THIS TO: "staticeyes1.js"
and click save. The original "staticeyes.js" remains unchanged!
Back to your web page, you can now add the style for "staticeyes1.js"
Example:
<style type="text/css">
</style>
To write the new eyes just add
<script type="text/javascript" src="staticeyes1.js"></script>
to where ever you want them to appear in your page.
Done! If you get stuck, study the example web page HTML/source.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Static Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="whitestyle.css" type="text/css">
<script type="text/javascript" src="whitestyle.js"></script>
<style type="text/css">
</style>
</head>
<body>
<p>
<script type="text/javascript">
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>"
+"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>"
+"<\/div><\/div>");
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</p>
Important! Works OK in the normal HTML flow, tables, and <p>"s etc. some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
<script type="text/javascript">
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>"
+"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>"
+"<\/div><\/div>");
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
<script type="text/javascript">
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>"
+"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>"
+"<\/div><\/div>");
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text
</td>
</tr>
</table>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/AnimationMoreEyes.zip">AnimationMoreEyes.zip( 5 k)</a>
//Trio - http://www.btinternet.ru/~kurt.grigg/javascript
/*
<script type="text/javascript" src="trio.js"></script>
Paste this link as or one off the last things in your page HTML, just before
</body>
</html>
To edit the colours, right click on the trio.js icon and choose edit.
Make sure the trio.js file is in/uploaded to the same
directory/folder as the wed page using the script!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trio</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body{
background-color : #000000;
}
</style>
</head>
<body>
<script type="text/javascript">
//Trio - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here...
var xCol = "#ff0000";
var yCol = "#ffffff";
var zCol = "#0000ff";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
//End.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.rupatMode) &&
document.rupatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName("div").length;
for (i = 0; i < n; i++){
var dims = (i+1)/2;
}
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
else{
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn(){
for (j = 0; j < 3; j++){
}
stp+=s;
for (i = 0; i < n; i++){
setTimeout(assgn,t);
}
function init(){
for (i = 0; i < n; i++){
winsize();
assgn();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
//Welcome Message - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link as the last thing on your page just before </body></html>
<script type="text/javascript" src="welcomemessage.js"></script>
To edit the message and colours, right click on the welcomemessage.js file icon
and choose edit.
Make sure the welcomemessage.js file is in/uploaded to the same directory/folder
as the web page using it!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welcome Message</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
</head>
<body>
<script type="text/javascript">
//Welcome Message - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
if (!window.opera){
(function(){
//Configure here.
var message = "Any message you want here !"; //your message.
var col = new Array("#ff0000","#00aa00","#0000ff"); //add more if needed.
var xyz = 26; //max grow size.
var spd = 30; //setTimeout speed.
//End.
var msg = message.split(" ");
var timer = null;
var clrPos = 0;
var msgPos = 0;
var jog = 1;
var currentStep = 10;
var step = 8;
var h,w,y,x,r,xy;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var running = true;
var box,txt;
var ovrflw = (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
?"-moz-scrollbars-none":"hidden";
var idx = d.getElementsByTagName("div").length;
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
y = Math.floor(h/2);
x = Math.floor(w/2);
xy = (w >= h)?w:h;
}
function scrl(yx){
var sy,sx;
if (domSy){
else{
return (yx == 0)?sy:sx;
}
function dsply(){
step += 15;
currentStep += step;
txt.top = y + Math.floor(-currentStep/16) + pix;
txt.left = x + Math.floor(-currentStep/2) + pix;
txt.width = currentStep + pix;
txt.fontSize = Math.floor(currentStep/8) + pix;
txt.color = col[clrPos];
d.getElementById("_txt"+idx).firstChild.data = msg[msgPos];
if (currentStep > xy * xyz){
}
if (clrPos >= col.length){
}
timer = setTimeout(dsply,spd);
if (msgPos >= msg.length){
box.top = scrl(0) + pix;
box.left = scrl(1) + pix;
}
function dims(){
if (domWw) box.width = "100%";
else box.width = w + pix;
box.height = h + pix;
}
function init(){
}
function rsz(){
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}
}//End.
</script>
</body>
</html>
<html>
<head>
<title>JSTween</title>
<script language="javascript">
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
notice, this list of conditions and the following disclaimer.
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
function Delegate() {}
Delegate.create = function (o, f) {
}
Tween = function(obj, prop, func, begin, finish, duration, suffixe){
}
var t = Tween.prototype;
t.obj = new Object();
t.prop="";
t.func = function (t, b, c, d) { return c*t/d + b; };
t.begin = 0;
t.change = 0;
t.prevTime = 0;
t.prevPos = 0;
t.looping = false;
t._duration = 0;
t._time = 0;
t._pos = 0;
t._position = 0;
t._startTime = 0;
t._finish = 0;
t.name = "";
t.suffixe = "";
t._listeners = new Array();
t.setTime = function(t){
}
t.getTime = function(){
}
t.setDuration = function(d){
}
t.getDuration = function(){
}
t.setPosition = function(p){
}
t.getPosition = function(t){
};
t.setFinish = function(f){
};
t.geFinish = function(){
};
t.init = function(obj, prop, func, begin, finish, duration, suffixe){
}
t.start = function(){
}
t.rewind = function(t){
}
t.fforward = function(){
}
t.update = function(){
t.startEnterFrame = function(){
}
t.onEnterFrame = function(){
}
t.nextFrame = function(){
t.stop = function(){
}
t.stopEnterFrame = function(){
}
t.continueTo = function(finish, duration){
}
t.resume = function(){
}
t.yoyo = function (){
}
t.addListener = function(o){
}
t.removeListener = function(o){
}
t.broadcastMessage = function(){
}
t.fixTime = function(){
}
t.getTimer = function(){
}
Tween.backEaseIn = function(t,b,c,d,a,p){
}
Tween.backEaseOut = function(t,b,c,d,a,p){
}
Tween.backEaseInOut = function(t,b,c,d,a,p){
}
Tween.elasticEaseIn = function(t,b,c,d,a,p){
}
Tween.elasticEaseOut = function (t,b,c,d,a,p){
Tween.elasticEaseInOut = function (t,b,c,d,a,p){
}
Tween.bounceEaseOut = function(t,b,c,d){
}
Tween.bounceEaseIn = function(t,b,c,d){
Tween.bounceEaseInOut = function(t,b,c,d){
Tween.strongEaseInOut = function(t,b,c,d){
Tween.regularEaseIn = function(t,b,c,d){
Tween.regularEaseOut = function(t,b,c,d){
Tween.regularEaseInOut = function(t,b,c,d){
Tween.strongEaseIn = function(t,b,c,d){
Tween.strongEaseOut = function(t,b,c,d){
Tween.strongEaseInOut = function(t,b,c,d){
</script>
<script language="javascript">
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
notice, this list of conditions and the following disclaimer.
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
TextTween.prototype = new Tween();
TextTween.prototype.constructor = Tween;
TextTween.superclass = Tween.prototype;
function TextTween(obj,property,txt,func,duration){
}
var o = TextTween.prototype;
o.targetObject = {};
o.targetProperty = {};
o.fromColor = "";
o.toColor = "";
o.currentColor = "";
o.onMotionChanged = function(evt){
}
</script>
<script language="javascript">
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
notice, this list of conditions and the following disclaimer.
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
function Delegate() {}
Delegate.create = function (o, f) {
}
function Sequence(){
}
var s = Sequence.prototype;
s.addChild = function(tween){
}
s.removeChild = function(tween){
}
s.start = function(){
}
s.next = function(){
}
s.play = function(){
}
s.stop = function(){
}
s.rewind = function(){
}
s.fforward = function(){
}
s.resume = function(){
}
s.addListener = function(o){
}
s.removeListener = function(o){
}
s.broadcastMessage = function(){
}
</script>
<script language="javascript">
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
notice, this list of conditions and the following disclaimer.
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
function Delegate() {}
Delegate.create = function (o, f) {
}
function Parallel(){
}
var s = Parallel.prototype;
s.endObject = new Object();
s.addChild = function(tween){
}
s.start = function(){
}
s.play = function(){
}
s.end = function(){
}
s.stop = function(){
s.rewind = function(){
s.fforward = function(){
s.resume = function(){
s.yoyo = function(){
s.enumAction = function(action){
}
s.addListener = function(o){
}
s.removeListener = function(o){
}
s.broadcastMessage = function(){
}
</script>
<script language="javascript">
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
notice, this list of conditions and the following disclaimer.
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
ColorTween.prototype = new Tween();
ColorTween.prototype.constructor = Tween;
ColorTween.superclass = Tween.prototype;
function ColorTween(obj,prop,func,fromColor,toColor,duration){
}
var o = ColorTween.prototype;
o.targetObject = {};
o.targetProperty = {};
o.fromColor = "";
o.toColor = "";
o.currentColor = "";
o.listenerObj = {};
o.onColorChanged = function(){
}
/***********************************************
o.getColor = function(start, end, percent)
{
}
/*** These are the simplest HEX/DEC conversion routines I could come up with ***/
/*** I have seen a lot of fade routines that seem to make this a ***/
/*** very complex task. I am sure somene else must"ve had this idea ***/
/************************************************/
o.dec2hex = function(dec){return(this.hexDigit[dec>>4]+this.hexDigit[dec&15]);}
o.hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
o.hex2dec = function(hex){return(parseInt(hex,16))};
</script>
<script language="javascript">
function init(){
}
</script>
<style>
h4{margin:0;padding:0;}
</style>
</head>
<body onload="init()">
<input type="button" onclick="t1.start();" value="start()"><input type="button" onclick="t1.stop();" value="stop()"><input type="button" onclick="t1.resume();" value="resume()"><input type="button" onclick="t1.rewind();" value="rewind()"><input type="button" onclick="t1.fforward();" value="fforward()"><input type="button" onclick="t1.yoyo();" value="yoyo()">
<input type="button" onclick="t2.start();" value="start()"><input type="button" onclick="t2.stop();" value="stop()"><input type="button"
onclick="t2.resume();" value="resume()"><input type="button" onclick="t2.rewind();" value="rewind()"><input type="button" onclick="t2.fforward();"
value="fforward()"><input type="button" onclick="t2.yoyo();" value="yoyo()">
<input type="button" onclick="t3.start();" value="start()"><input type="button" onclick="t3.stop();" value="stop()"><input type="button"
onclick="t3.resume();" value="resume()"><input type="button" onclick="t3.rewind();" value="rewind()"><input type="button" onclick="t3.fforward();"
value="fforward()"><input type="button" onclick="t3.yoyo();" value="yoyo()">
<input type="button" onclick="seq1.start();" value="start()"><input type="button" onclick="seq1.stop();" value="stop()"><input type="button"
onclick="seq1.resume();" value="resume()"><input type="button" onclick="seq1.rewind();" value="rewind()"><input type="button" onclick="seq1.fforward();"
value="fforward()">
<input type="button" onclick="par1.start();" value="start()"><input type="button" onclick="par1.stop();" value="stop()"><input type="button"
onclick="par1.resume();" value="resume()"><input type="button" onclick="par1.rewind();" value="rewind()"><input type="button" onclick="par1.fforward();"
value="fforward()"><input type="button" onclick="par1.yoyo();" value="yoyo()">
<textarea id="debug" cols="30" rows="30">
</textarea>
<textarea id="debug2" cols="30" rows="30">
</textarea>
<textarea id="debug3" cols="30" rows="30">
</textarea>
</body>
</html>
//Wriggly by Kurt Grigg - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link as the last thing on your page just before </body></html>
<script type="text/javascript" src="wriggly.js"></script>
To edit the colours, right click on the wriggly.js file icon and choose edit.
Make sure the wriggly.js file is in/uploaded to the same directory/folder as the
web page using it!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wriggly</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Wriggly by Kurt Grigg - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here....
var colours = new Array("#ff0000","#00ff00","#ffa500","#fff000");
var num = 10; //number of segments.
var icen = 2; //next segment is times "icen" previous segment size.
var rep = 40; //setTimeout speed.
var min = 0; //slowest speed.
var max = 10; //fastest speed.
//End.
var temp1 = new Array();
var temp2 = new Array();
if (icen%2 != 0) icen++;
var fcen = icen/2;
var d = document;
var idx = d.getElementsByTagName("div").length;
var dims;
for (i = 0; i < num; i++){
var randcol = colours[Math.floor(Math.random()*colours.length)];
var dims = (i+1) * icen;
}
var h,w,r;
var y = 0;
var x = 0;
var dir = 45; //direction.
var acc = 1; //acceleration.
var newacc = new Array(1,0,1);
var vel = 1; //initial speed.
var sev = 0;
var newsev = new Array(8,-8,5,-5,3,-3,1,-1,0);
//counters.
var c1 = 0; //time between changes.
var c2 = 0; //new time between changes.
var pix = "px";
var strictmod = ((document.rupatMode) &&
document.rupatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh - (dims+fcen+1);
w = rw - (dims+fcen+1);
}
else{
h = r.clientHeight - (dims+fcen+1);
w = r.clientWidth - (dims+fcen+1);
}
}
function scrl(yx){
var y,x;
if (domSy){
else{
return (yx == 0)?y:x;
}
function followleader(){
}
function newpath(){
sev = newsev[Math.floor(Math.random()*newsev.length)];
acc = newacc[Math.floor(Math.random()*newacc.length)];
c2 = Math.floor(10+Math.random()*50);
}
function animate(){
var vb,hb,dy,dx,curr;
if (acc == 1) vel +=0.05;
if (acc == 0) vel -=0.05;
if (vel >= max) vel = max;
if (vel <= min) vel = min;
c1++;
if (c1 >= c2){
}
curr = dir+=sev;
dy = vel * Math.sin(curr*Math.PI/180);
dx = vel * Math.cos(curr*Math.PI/180);
y+=dy;
x+=dx;
//horizontal-vertical bounce.
vb = 180-dir;
hb = 0-dir;
//Corner rebounds?
if ((y < 1) && (x < 1)){y = 1; x = 1; dir = 45;}
if ((y < 1) && (x > w)){y = 1; x = w; dir = 135;}
if ((y > h) && (x < 1)){y = h; x = 1; dir = 315;}
if ((y > h) && (x > w)){y = h; x = w; dir = 225;}
//edge rebounds.
if (y < 1) {y = 1; dir = hb;}
if (y > h) {y = h; dir = hb;}
if (x < 1) {x = 1; dir = vb;}
if (x > w) {x = w; dir = vb;}
followleader();
setTimeout(animate,rep);
}
function init(){
for (i=0; i < num; i++){
}
winsize();
var iniafter = Math.floor(500+Math.random()*2000);
setTimeout(animate,iniafter);
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
<html>
<head>
<title>DynAPI Examples - DynLayer Attack!</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
</script>
<script language="Javascript">
var myTarget,w=0
dynapi.onLoad (function() {
})
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
// Lottery Number Picker - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this link where you want the lottery picker to appear on your page.
<script type="text/javascript" src="straightlotto.js"></script>
To edit, right click on the straightlotto.js file icon and choose edit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Straight Lotto</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
</head>
<body>
else{
}
function lotto(){
var rng = to-from;
var dum = "";
var e = (rng + 1);
var draw = new Array();
var number;
if (from >= to ){
if ( (to+1)-from < pick){
playing = true;
for (i=0; i < pick; i++){
number = parseInt(from + Math.random() * e);
draw[i] = number;
}
draw.sort(numsort);
for (i=0; i < pick; i++){
}
counter++;
document.getElementById("result"+idx).firstChild.data = disp;
timer = setTimeout(lotto,50);
if (counter > 50){
}
var idx = document.getElementsByTagName("div").length;
//Alter the display style/looks here!
//Do not delete any commas etc!!
+"<input type="button" id="play"+idx+"""
+"value=""+buttonText+"" style="margin:5px">"
var controlButton = document.getElementById("play"+idx);
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}
</script>
</body>
</html>
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Big Static Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
DON"T FORGET - DO NOT PUT INSIDE ANY OTHER DIV! . . . . . <script type="text/javascript">
//Static Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "bigeye.gif";
var p_img = new Image();
p_img.src = "bigpupil.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:37px;left:37px;width:27px;height:27px"/>"
+"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:37px;left:140px;width:27px;height:27px"/>"
+"<\/div><\/div>");
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 51;
var c1x = osx + 51;
var c2y = osy + 51;
var c2x = osx + 154;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.36;
var onEyeBall1 = (d1 < 51)?d1/dv:37;
var onEyeBall2 = (d2 < 51)?d2/dv:37;
pupil1.top = c1y-13+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-13+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-13+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-13+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/bigstaticeyes.zip">bigstaticeyes.zip( 6 k)</a>
<html>
<head>
<script language="JavaScript" type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLapi.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 1-56592-494-0
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.ru).
// Release 2.0. Supports NN4, IE, and W3C DOMs.
// Global variables
var isCSS, isW3C, isIE4, isNN4;
// initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
}
// set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
}
// Set the background color of an object
function setBGColor(obj, color) {
}
// Set the visibility of an object to visible
function show(obj) {
}
// Set the visibility of an object to hidden
function hide(obj) {
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
}
</script>
<script language="JavaScript" type="text/javascript">
// ** Global variables ** //
// circular motion arc interval controllers
var intervalCount = 1;
var intervalID;
// "Corrector" positioning factor for IE/Mac et al., but doesn"t hurt others
var fudgeFactor = {top:-1, left:-1};
// Set initial position offscreen and show object and
// start timer by calling glideToCenter()
function startRoll(layerName) {
}
// Move element along an arc that is 1/36 of a circle; stop at full circle
function goAround(layerName) {
}
</script>
</head>
<body onLoad="initDHTMLAPI(); startRoll("banner")" >
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Qiksearch Dancing Text</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:maroon; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/qiksearch_dancing_text.htm
//*********************************************
//* Qiksearch Dancing Text *
//* This script makes a text dance!!! *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
function dance()
{
for(var i=1; i<=text_dance_len; i++)
{
}
dodance();
}
function dodance()
{
for(var i=1; i<=text_dance_len; i++)
{
Scroll(text_dance+i);
}
}
if (NS4 || IE4) {
}
//DANCER
function Scroll(layerName){
}
dance();
</script>
</head>
<body bgcolor="#FFFFFF">
Qiksearch Dancing Text
This is a JavaScript that creates a dancing effect for a text like the one above. </body>
</html>
<html>
<head>
<title>Changing className Properties</title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/javascript">
// Set global variables
var totalCycles = 0;
var currColor = 0;
var classes, intervalID;
// Build array of rule selector names
function init() {
}
// Advance the color by one
function cycleColors() {
}
</script>
</head>
<body onload="init(); cycleColors();">
</body>
</html>
<html>
<head>
<title>Changing style Properties</title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/javascript">
// Set global variables
var totalCycles = 0;
var currColor = 0;
var colors, intervalID;
// Build array of color names
function init() {
}
// Advance the color by one
function cycleColors() {
}
</script>
</head>
<body onload="init(); cycleColors();">
</body>
</html>
//Following Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
/*
Paste this js-link between the <body> </body> tags of your page HTML.
<script type="text/javascript" src="followingeyes.js"></script>
Make sure that followingeyes.js, pupils.gif and eye.gif are in/uploaded
to the same directory/folder as the web page using the script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Following Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Following Eyes - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var idx = document.images.length;
if ( document.getElementById("pic"+idx) ||
document.getElementById("ppl1"+idx) ||
document.getElementById("ppl2"+idx)) idx++;
document.write("<img id="eyblls"+idx+"" src=""+e_img.src+"" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>"
+"<img id="ppl1"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>"
+"<img id="ppl2"+idx+"" src=""+p_img.src+"" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>");
var h,w,r,eyeballs,pupil1,pupil2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
else{
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
}
function makefollow(){
var sy = scrl(0);
var sx = scrl(1);
//Keep eyes on screen.
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
//eyeball1 centre.
var c1y = chy+17;
var c1x = chx+17;
//eyeball2 centre.
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
eyeballs.top = chy+sy+pix;
eyeballs.left = chx+sx+pix;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function move(){
}
function init(){
eyeballs = document.getElementById("eyblls"+idx).style;
pupil1 = document.getElementById("ppl1"+idx).style;
pupil2 = document.getElementById("ppl2"+idx).style;
winsize();
move();
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
})();
}//End.
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/followingeyes.zip">followingeyes.zip( 3 k)</a>
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
<html>
<body>
<script>
/**
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
}
animateCSS(image, 25, 50, // Animate image for 25 frames of 50ms each
</script>
</body>
<html>
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
<HTML>
<HEAD>
<TITLE>Simple Animation</TITLE>
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
<IMG NAME="display" SRC="image0.gif" onLoad="setStart()">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Ticker 1.2</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.tick{font-family:verdana,arial,helvetica; font-size:10pt; color:#003399; font-weight:bold}
.tick:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#0099FF; font-weight:bold}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#DEAC00; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/ticker12.htm
//*********************************************
//* JavaScript Ticker 1.2 *
//* Ticks a number of messages *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
var ticker_len = ticker_msg.length;
for(var l=0; l<ticker_len; l++)
{
}
if (NS4 || IE4) {
}
//SCROLL
function tick(){
if (NS4 || IE4) {
}
tick();
</script>
</head>
<body bgcolor="#FFFFFF">
JavaScript Ticker 1.2
This is a JavaScript Ticker which ticks a number of messages like the one shown above.
You can add more messages in the array ticker_msg. The URL for that
message should be added to the array ticker_url.
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Link Hint Scroller 2.0</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#DD0000; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#3366CC; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/link_hint_scroller20.htm
//*********************************************
//* Link Hint Scroller 2.0 *
//* Modified 18/04/02 *
//* This script when you move your mouse over *
//* displays a scrolling hint *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
//-----------------------------------------------------------
//-----------------------------------------------------------
if (NS4 || IE4) {
}
//SCROLL
function Scroll(layerName)
{
}
//STOP SCROLLING
function StopScroll(layerName)
{
}
function reset()
{
}
// HIDE HINT
function hideLayer(layerName)
{
}
</script>
</head>
<body bgcolor="#FFFFFF">
Link Hint Scroller 2.0
<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>
This is the hint or description for the above link!
When you move your mouse over the above link a hint or something about the link
will appear below the link in a scrolling fashion. When you move your mouseout the scrolling will stop.
</body>
</html>
/*
Paste this style sheet to the head of your page or add its contents to an existing sheet.
<style type="text/css">
</style>
Paste this link to where you the game to appear on your page.
<script type="text/javascript" src="bln.js"></script>
Make sure the bln.js file is in/uploaded to the same directory/folder as the web page using it!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Better Lottery Numbers</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function theGameHTML(){
Grigg_1=new Array(60,102,111,114,109,32,110,97,109,101,61,34,98,108,110,34,32,97,99,
116,105,111,110,61,34,34,62,13,10,60,116,97,98,108,101,32,99,101,108,108,112,97,100,
100,105,110,103,61,34,53,34,32,99,101,108,108,115,112,97,99,105,110,103,61,34,48,34,
32,99,108,97,115,115,61,34,98,108,110,116,120,116,34,32,115,116,121,108,101,61,34,98,
111,114,100,101,114,58,52,112,120,32,115,111,108,105,100,32,35,99,102,53,54,48,48,34,
62,60,116,114,62,60,116,100,32,115,116,121,108,101,61,34,116,101,120,116,45,97,108,
105,103,110,58,99,101,110,116,101,114,59,98,97,99,107,103,114,111,117,110,100,45,99,
111,108,111,114,58,35,99,102,56,52,48,48,34,62,60,115,112,97,110,32,115,116,121,108,
101,61,34,102,111,110,116,45,115,105,122,101,58,49,51,112,120,59,102,111,110,116,45,
119,101,105,103,104,116,58,98,111,108,100,34,62,13,10,66,101,116,116,101,114,32,76,
111,116,116,101,114,121,32,78,117,109,98,101,114,115,13,10,60,47,115,112,97,110,62,
60,98,114,47,62,13,10,83,116,97,110,100,97,114,100,32,102,111,114,109,97,116,58,32,
54,32,110,117,109,98,101,114,115,32,102,114,111,109,32,49,32,116,111,32,52,57,13,10,
60,112,62,60,97,32,99,108,97,115,115,61,34,107,106,103,34,32,104,114,101,102,61,34,
104,116,116,112,58,47,47,119,119,119,46,98,116,105,110,116,101,114,110,101,116,46,99,
111,109,47,126,107,117,114,116,46,103,114,105,103,103,47,106,97,118,97,115,99,114,105,
112,116,34,62,38,99,111,112,121,59,32,75,117,114,116,39,115,32,100,104,116,109,108,60,
47,97,62,32,38,110,98,115,112,59,32,38,110,98,115,112,59,32,38,110,98,115,112,59,32,60,
97,32,99,108,97,115,115,61,34,107,106,103,34,32,104,114,101,102,61,34,104,116,116,112,
58,47,47,119,119,119,46,98,116,105,110,116,101,114,110,101,116,46,99,111,109,47,126,
107,117,114,116,46,103,114,105,103,103,47,106,97,118,97,115,99,114,105,112,116,47,90,
105,112,115,47,98,108,110,46,122,105,112,34,62,13,10,68,111,119,110,108,111,97,100,32,
102,111,114,32,121,111,117,114,32,119,101,98,32,112,97,103,101,32,111,114,32,106,117,
115,116,32,116,111,32,112,108,97,121,32,111,102,102,45,108,105,110,101,13,10,60,47,97,
62,60,47,112,62,60,47,116,100,62,60,47,116,114,62,60,116,114,62,60,116,100,62,13,10,
68,111,110,39,116,32,119,97,115,116,101,32,116,105,109,101,32,97,110,100,32,109,111,
110,101,121,32,98,121,32,115,116,105,99,107,105,110,103,32,119,105,116,104,32,100,117,
100,32,108,111,116,116,101,114,121,32,110,117,109,98,101,114,115,46,32,13,10,70,105,
110,100,32,111,117,116,32,116,104,101,32,119,105,110,110,105,110,103,32,112,111,116,
101,110,116,105,97,108,32,111,102,32,121,111,117,114,32,110,117,109,98,101,114,115,32,
110,111,119,46,32,84,104,105,115,32,103,97,109,101,32,99,97,110,32,115,105,109,117,108,
97,116,101,32,121,101,97,114,115,32,111,102,32,13,10,112,108,97,121,32,98,121,32,99,
104,101,99,107,105,110,103,32,121,111,117,114,32,110,117,109,98,101,114,115,32,97,103,
97,105,110,115,116,32,97,110,32,105,110,102,105,110,105,116,101,32,110,117,109,98,101,
114,32,111,102,32,99,111,109,112,117,116,101,114,32,103,101,110,101,114,97,116,101,100,
32,108,111,116,116,101,114,121,32,100,114,97,119,115,46,32,13,10,60,112,32,115,116,121,
108,101,61,34,116,101,120,116,45,97,108,105,103,110,58,99,101,110,116,101,114,34,62,13,
10,84,111,32,112,108,97,121,44,32,101,110,116,101,114,32,121,111,117,114,32,115,105,
120,32,110,117,109,98,101,114,115,32,105,110,32,116,111,32,116,104,101,32,39,89,111,
117,114,32,78,117,109,98,101,114,115,39,32,98,111,120,32,97,110,100,32,99,108,105,99,
107,32,80,108,97,121,46,13,10,60,47,112,62,60,47,116,100,62,60,47,116,114,62,60,116,
114,62,60,116,100,32,115,116,121,108,101,61,34,98,97,99,107,103,114,111,117,110,100,45,
99,111,108,111,114,58,35,99,102,56,52,48,48,34,62,60,116,97,98,108,101,32,99,101,108,
108,112,97,100,100,105,110,103,61,34,53,34,32,99,101,108,108,115,112,97,99,105,110,103,
61,34,48,34,32,99,108,97,115,115,61,34,98,108,110,116,120,116,34,62,60,116,114,62,60,
116,100,32,99,111,108,115,112,97,110,61,34,50,34,32,115,116,121,108,101,61,34,116,101,
120,116,45,97,108,105,103,110,58,99,101,110,116,101,114,59,98,97,99,107,103,114,111,
117,110,100,45,99,111,108,111,114,58,35,99,102,56,52,48,48,34,62,13,10,89,111,117,114,
32,78,117,109,98,101,114,115,13,10,60,98,114,47,62,60,105,110,112,117,116,32,110,97,
109,101,61,34,117,115,101,114,34,32,116,121,112,101,61,34,116,101,120,116,34,32,115,
105,122,101,61,34,49,55,34,32,109,97,120,108,101,110,103,116,104,61,34,49,55,34,32,
111,110,102,111,99,117,115,61,34,109,105,115,99,104,105,101,102,95,49,40,41,34,32,118,
97,108,117,101,61,34,34,62,60,98,114,47,62,60,47,116,100,62,60,116,100,32,114,111,119,
115,112,97,110,61,34,51,34,32,115,116,121,108,101,61,34,119,105,100,116,104,58,52,48,
48,112,120,59,116,101,120,116,45,97,108,105,103,110,58,108,101,102,116,34,62,13,10,87,
111,110,32,60,105,110,112,117,116,32,110,97,109,101,61,34,102,54,34,32,116,121,112,101,
61,34,116,101,120,116,34,32,115,105,122,101,61,34,53,34,32,111,110,102,111,99,117,115,
61,34,109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,108,117,101,61,34,48,34,
62,32,116,105,109,101,115,46,32,77,97,116,99,104,32,54,32,119,105,110,115,32,163,51,44,
48,48,48,44,48,48,48,43,60,98,114,47,62,32,13,10,87,111,110,32,60,105,110,112,117,116,
32,110,97,109,101,61,34,102,53,97,34,32,116,121,112,101,61,34,116,101,120,116,34,32,
115,105,122,101,61,34,53,34,32,111,110,102,111,99,117,115,61,34,109,105,115,99,104,105,
101,102,95,51,40,41,34,32,118,97,108,117,101,61,34,48,34,62,32,116,105,109,101,115,46,
32,77,97,116,99,104,32,53,32,43,32,98,111,110,117,115,32,119,105,110,115,32,163,49,53,
48,44,48,48,48,43,60,98,114,47,62,13,10,87,111,110,32,60,105,110,112,117,116,32,110,97,
109,101,61,34,102,53,34,32,116,121,112,101,61,34,116,101,120,116,34,32,115,105,122,101,
61,34,53,34,32,111,110,102,111,99,117,115,61,34,109,105,115,99,104,105,101,102,95,51,
40,41,34,32,118,97,108,117,101,61,34,48,34,62,32,116,105,109,101,115,46,32,77,97,116,
99,104,32,53,32,119,105,110,115,32,163,50,48,48,48,43,60,98,114,47,62,13,10,87,111,110,
32,60,105,110,112,117,116,32,110,97,109,101,61,34,102,52,34,32,116,121,112,101,61,34,
116,101,120,116,34,32,115,105,122,101,61,34,53,34,32,111,110,102,111,99,117,115,61,34,
109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,108,117,101,61,34,48,34,62,32,
116,105,109,101,115,46,32,77,97,116,99,104,32,52,32,119,105,110,115,32,163,52,57,43,60,
98,114,47,62,13,10,87,111,110,32,60,105,110,112,117,116,32,110,97,109,101,61,34,102,51,
34,32,116,121,112,101,61,34,116,101,120,116,34,32,115,105,122,101,61,34,53,34,32,111,
110,102,111,99,117,115,61,34,109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,
108,117,101,61,34,48,34,62,32,116,105,109,101,115,46,32,77,97,116,99,104,32,51,32,119,
105,110,115,32,163,49,48,13,10,60,112,62,13,10,89,111,117,32,109,97,116,99,104,101,100,
32,60,105,110,112,117,116,32,110,97,109,101,61,34,99,117,114,114,34,32,116,121,112,101,
61,34,116,101,120,116,34,32,115,105,122,101,61,34,49,34,32,111,110,102,111,99,117,115,
61,34,109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,108,117,101,61,34,34,62,
32,110,117,109,98,101,114,115,32,102,111,114,32,99,117,114,114,101,110,116,32,100,114,
97,119,46,32,13,10,60,47,112,62,60,105,110,112,117,116,32,110,97,109,101,61,34,112,108,
121,34,32,116,121,112,101,61,34,98,117,116,116,111,110,34,32,118,97,108,117,101,61,34,
80,108,97,121,34,32,111,110,99,108,105,99,107,61,34,109,105,115,99,104,105,101,102,95,
50,40,41,34,62,32,60,105,110,112,117,116,32,116,121,112,101,61,34,98,117,116,116,111,
110,34,32,118,97,108,117,101,61,34,82,101,115,101,116,34,32,111,110,99,108,105,99,107,
61,34,114,115,116,40,41,34,62,13,10,38,110,98,115,112,59,38,110,98,115,112,59,68,114,
97,119,32,115,112,101,101,100,32,13,10,60,115,101,108,101,99,116,32,110,97,109,101,61,
34,115,112,101,101,100,34,32,111,110,99,104,97,110,103,101,61,34,110,101,119,115,112,
101,101,100,40,116,104,105,115,41,34,62,13,10,60,111,112,116,105,111,110,32,118,97,108,
117,101,61,49,48,62,102,97,115,116,101,115,116,60,47,111,112,116,105,111,110,62,13,10,
60,111,112,116,105,111,110,32,118,97,108,117,101,61,53,48,48,62,102,97,115,116,60,47,
111,112,116,105,111,110,62,13,10,60,111,112,116,105,111,110,32,118,97,108,117,101,61,
49,48,48,48,32,115,101,108,101,99,116,101,100,62,109,101,100,105,117,109,13,10,60,111,
112,116,105,111,110,32,118,97,108,117,101,61,50,48,48,48,62,115,108,111,119,60,47,111,
112,116,105,111,110,62,13,10,60,111,112,116,105,111,110,32,118,97,108,117,101,61,51,48,
48,48,62,115,108,111,119,101,115,116,60,47,111,112,116,105,111,110,62,13,10,60,47,115,
101,108,101,99,116,62,60,47,116,100,62,60,47,116,114,62,60,116,114,62,60,116,100,32,99,
111,108,115,112,97,110,61,34,50,34,32,115,116,121,108,101,61,34,116,101,120,116,45,97,
108,105,103,110,58,99,101,110,116,101,114,59,98,97,99,107,103,114,111,117,110,100,45,
99,111,108,111,114,58,35,99,102,56,52,48,48,34,62,13,10,84,104,101,32,76,111,116,116,
101,114,121,32,78,117,109,98,101,114,115,13,10,60,98,114,47,62,60,105,110,112,117,116,
32,110,97,109,101,61,34,102,34,32,116,121,112,101,61,34,116,101,120,116,34,32,115,105,
122,101,61,34,49,55,34,32,111,110,102,111,99,117,115,61,34,109,105,115,99,104,105,101,
102,95,51,40,41,34,32,118,97,108,117,101,61,34,34,62,60,98,114,47,62,13,10,66,111,110,
117,115,32,66,97,108,108,13,10,60,98,114,47,62,60,105,110,112,117,116,32,110,97,109,
101,61,34,98,34,32,116,121,112,101,61,34,116,101,120,116,34,32,115,105,122,101,61,34,
50,34,32,111,110,102,111,99,117,115,61,34,109,105,115,99,104,105,101,102,95,51,40,41,
34,32,118,97,108,117,101,61,34,34,62,60,47,116,100,62,60,47,116,114,62,60,116,114,62,
13,10,60,116,100,32,115,116,121,108,101,61,34,116,101,120,116,45,97,108,105,103,110,
58,99,101,110,116,101,114,59,98,97,99,107,103,114,111,117,110,100,45,99,111,108,111,
114,58,35,99,102,56,52,48,48,34,62,13,10,163,39,115,32,115,112,101,110,116,13,10,60,
98,114,47,62,60,105,110,112,117,116,32,110,97,109,101,61,34,102,99,34,32,116,121,112,
101,61,34,116,101,120,116,34,32,115,105,122,101,61,34,56,34,32,111,110,102,111,99,117,
115,61,34,109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,108,117,101,61,34,48,
34,62,60,47,116,100,62,60,116,100,32,115,116,121,108,101,61,34,116,101,120,116,45,97,
108,105,103,110,58,99,101,110,116,101,114,59,98,97,99,107,103,114,111,117,110,100,45,
99,111,108,111,114,58,35,99,102,56,52,48,48,34,62,13,10,163,39,115,32,119,111,110,13,
10,60,98,114,47,62,60,105,110,112,117,116,32,110,97,109,101,61,34,102,119,34,32,116,
121,112,101,61,34,116,101,120,116,34,32,115,105,122,101,61,34,56,34,32,111,110,102,111,
99,117,115,61,34,109,105,115,99,104,105,101,102,95,51,40,41,34,32,118,97,108,117,101,
61,34,48,34,62,60,47,116,100,62,60,47,116,114,62,60,47,116,97,98,108,101,62,60,47,116,
100,62,60,47,116,114,62,60,116,114,62,60,116,100,62,13,10,87,97,114,110,105,110,103,33,
32,83,117,112,101,114,115,116,105,116,105,111,117,115,32,116,121,112,101,115,46,32,87,
105,110,110,105,110,103,32,116,104,101,32,106,97,99,107,112,111,116,32,105,115,32,49,
52,44,48,48,48,44,48,48,48,32,116,111,32,49,46,32,73,102,32,121,111,117,32,119,105,110,
32,105,116,32,104,101,114,101,32,102,111,114,32,110,111,116,104,105,110,103,44,32,121,
111,117,39,118,101,32,13,10,112,114,111,98,97,98,108,121,32,98,108,111,119,110,32,121,
111,117,114,32,111,110,108,121,44,32,105,102,32,97,110,121,44,32,99,104,97,110,99,101,
32,111,102,32,100,111,105,110,103,32,105,116,32,97,103,97,105,110,32,102,111,114,32,
114,101,97,108,33,13,10,60,47,116,100,62,60,47,116,114,62,60,47,116,97,98,108,101,62,
60,47,102,111,114,109,62);
var the_code;
dum = "";
Grigg_2 = new Array();
for (i=0; i < Grigg_1.length; i++){
Grigg_2[i] = String.fromCharCode(Grigg_1[i]);
the_code=dum+=Grigg_2[i];
}
document.write(the_code);
}
theGameHTML();
var bln = document.bln;
var timer = null;
var _3 = 0;
var _4 = 0;
var _5 = 0;
var _5a = 0;
var _6 = 0;
var count = 0;
var won = 0;
var d4;
var playing = false;
var bonus = false;
function mischief_1(){
if (playing){
}
function mischief_2(){
}
function mischief_3(){
}
function usercheck(){
d1 = bln.user.value;
d1a = bln.user;
d1 = d1.substring(c1,d1.length);
}//End func.
function numsort(n1,n2) {
if (n1<n2) v=-1;
else if (n1>n2) v=1;
else v=0;
return v;
}
function rst(){
if (playing)clearTimeout(timer);
bonus=false;
playing=false;
user_disp="";
_3=0;
_4=0;
_5=0;
_5a=0;
_6=0;
count=0;
won=0;
bln.user.value="";
bln.f.value="";
bln.b.value="";
bln.fc.value=0;
bln.fw.value=0;
bln.f6.value=0;
bln.f5a.value=0;
bln.f5.value=0;
bln.f4.value=0;
bln.f3.value=0;
bln.curr.value="";
}
rst();
var spd = 1000;
function newspeed(x){
spd = x.options[x.selectedIndex].value;
}
function lotto(){
playing = true;
bonus = false;
var find = 0;
var dum1 = "";
var nums = new Array();
for (i=0; i < 6; i++){
r_nums = parseInt(1 + Math.random() * 49);
nums[i]=r_nums;
}
nums.sort(numsort);
//Get bonus ball.
b_ball=Math.round(1+Math.random()*48);
for (j=0; j < 6; j){
}
timer = setTimeout("lotto()",spd);
if (find == 6){won+=3000000;_6++;alert("Jackpot.\nGame over.");clearTimeout(timer)}
if (find == 5 && bonus){won+=150000;_5a++}
if (find == 5){won+=2000;_5++}
if (find == 4){won+=49;_4++}
if (find == 3){won+=10;_3++}
count++;
bln.fc.value = count;
bln.fw.value = won;
bln.f6.value = _6;
bln.f5a.value = _5a;
bln.f5.value = _5;
bln.f4.value = _4;
bln.f3.value = _3;
bln.curr.value = find;
}
</script>
</body>
</html>
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
<html>
<head>
<title>Animation with Divisions</title>
</head>
<script language="JavaScript">
function fly() {
}
</script>
<body bgcolor="blue" onload="setInterval("fly()",100)">
<img src="http://www.wbex.ru/style/logo.png">
<img src="cloud.gif">
<img src="cloud.gif">
<img src="cloud.gif">
<img src="cloud.gif">
</BODY>
</HTML>
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
<html>
<head>
<title>Replacing Text</title>
<script language="JavaScript">
var msgIX = 0
var msgs = new Array(
)
function scrollMessages(milliseconds) {
}
function displayMessage() {
}
</script>
</head>
<body onload="scrollMessages(2000)">
</body>
</html>
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
<html>
<script>
// Here are the initial values for our animation.
var x = 0, y = 0, w=200, h=200; // Window position and size
var dx = 5, dy = 5; // Window velocity
var interval = 100; // Milliseconds between updates
// Create the window that we"re going to move around.
// The javascript: URL is simply a way to display a short document.
// The final argument specifies the window size.
// Set the initial position of the window.
win.moveTo(x,y);
// Use setInterval() to call the bounce() method every interval
// milliseconds. Store the return value so that we can stop the
// animation by passing it to clearInterval().
var intervalID = window.setInterval("bounce()", interval);
// This function moves the window by (dx, dy) every interval ms.
// It bounces whenever the window reaches the edge of the screen.
function bounce() {
}
</script>
<form>
<input type="button" value="Stop"
</form>
</html>
<html>
<head>
<style type="text/css">
body {overflow:hidden}
</style>
<script language="JavaScript" type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLapi.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 1-56592-494-0
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.ru).
// Release 2.0. Supports NN4, IE, and W3C DOMs.
// Global variables
var isCSS, isW3C, isIE4, isNN4;
// initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
}
// set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
}
// Set the background color of an object
function setBGColor(obj, color) {
}
// Set the visibility of an object to visible
function show(obj) {
}
// Set the visibility of an object to hidden
function hide(obj) {
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
}
</script>
<script language="JavaScript" type="text/javascript">
// ** Global variables ** //
// Final left position of gliding element
var stopPoint = 0;
// Interval ID
var intervalID;
// "Corrector" positioning factor for IE/Mac et al., but doesn"t hurt others
var fudgeFactor = {top:-1, left:-1};
// Set initial position offscreen and show object and
// start timer by calling glideToCenter()
function startGlide(layerName) {
}
// Move the object to the left by 5 pixels until it"s centered
function glideToCenter(layerName) {
}
</script>
</head>
<body onLoad="initDHTMLAPI(); startGlide("banner")" >
</body>
</html>
<HTML>
<HEAD>
// XSnow for JavaScript - von Mag. Dr. Nikolaus Klepp - dr.klepp@gmx.at - www.klepp.info
//---------------------------------------------------------------------------------------
/* jsSnow
//---------------------------------------------------------------------------------------
window.onerror = null;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
var BV = (parseFloat(navigator.appVersion.indexOf("MSIE")>0 ?
var op = (navigator.userAgent.indexOf("Opera")!=-1 && BV>=4);
var pageWidth = 0; // page dimension & visible offset
var pageHeight = 0;
var pageOffX = 0;
var pageOffY = 0;
// <---- Customizable part ----
var flakeImageDir = "./"; // relative path for the snow flake images
var santaImageDir = "./"; // relative path for Santa images
var santaSize = "2"; // 1, 2 or 3 (smaller number specifies smaller image)
var infoLayer = "info"; // set to false if you don"t need f/s display
var flakes = 25; // total number of snowflakes
var santa_mass = 5; // santa"s effective mass during storms
var santa_speed_PperS = 20; // santa speed in pixel/second
var flake_speed_PperS = 30; // flake speed in pixel/second
var storm_speed_PperS = 300; // storm speed in pixel/second
var santa_init_x = -256; // santa"s initial X-position
var santa_direction = 0; // santa"s movement direction in degree
var santa_appearance = 0.75; // probability between [0:1] for santa to be shown
var flake_TX = 1.0; // max. sec. of flake"s constant X-movement on fluttering
var flake_XperY = 2.0; // fluttering movement"s max. vx/vy ratio
var santa_TY = 0.5; // max. sec. of santa"s constant Y-movement in his rugged movement
var santa_YperX = 0.5; // santa"s rugged movement"s max. vy/vx ratio
var storm_duration_S = 10.0; // storm duration in seconds - watch out: about 1-2 seconds for deceleration
var storm_lag_S = 60.0; // no-storm in seconds
var storm_YperX = 1/3.0; // storm"s max. vy/vx ratio
var disappear_margin = 32; // pixels from each border where objects disappear
// ---- Customizable part ---->
var refresh_FperS = 20; // initial frames/second, recalculated.
var refresh = 1000/refresh_FperS; // ms/frame
var santa_speed = 0; // santa speed in pixel/frame
var flake_speed = 0; // flake speed in pixel/frame
var storm_speed = 0; // storm speed in pixel/frame
var storm_YperX_current = storm_YperX; // storm direction varies each time
var storm_v_sin = 0; // storm speed"s sine
var storm_v_cos = 1; // storm speed"s cosine
var storm_direction = 0; // storm X-direction, -1/0=quiet/+1
var storm_id = 0; // ID of storm timer
var storm_blowing = 1; // start with storm=ON
var santa;
var santaX = 0; // X-position of santa
var santaY = 0; // Y-position of santa
var santaSY = 0; // frames till Y-movement changes
var santaVY = 0; // variant Y-movement in pixel/frame
var santaMX = 1; // steady movement"s X-ratio
var santaMY = 0; // steady movement"s Y-ratio
var santaDX = 0; // X-movement in pixel/frame, caused by storm
var santaDY = 0; // Y-movement in pixel/frame, caused by storm
var flake = new Array(flakes);
var flakeX = new Array(flakes);
var flakeY = new Array(flakes);
var flakeSX = new Array(flakes);
var flakeVX = new Array(flakes);
var flakeVY = new Array(flakes);
var flakeVIS = new Array(flakes);
var flakeDX = 0; // X-movement in pixel/frame, caused by storm
var flakeDY = 0; // Y-movement in pixel/frame, caused by storm
var timer_id = 0; // ID if timer proc.
var timer_sum = refresh; // Inital values for speed calculation
var timer_count = 1; // --""--
var flake_visible = op; // start with visble flakes for Opera, all others start invisible
var flake_id = 0; // timer id of make_flake_visible
//-------------------------------------------------------------------------
// preload images
//-------------------------------------------------------------------------
var kFlakeImages = 7;
var flake_images = new Array(kFlakeImages);
for(i=0;i<kFlakeImages;i++) {
}
var santa_image = new Image();
santa_image.src = santaImageDir+"sleigh"+santaSize+".gif";
//-------------------------------------------------------------------------
// calculates optimum framerate & corresponding speed
//-------------------------------------------------------------------------
function rebuild_speed_and_timer() {
}
//-------------------------------------------------------------------------
// make flakes visible: while initalialisation phase flakes are invisble.
// after make_flakes_visible, all new flakes start visible
//-------------------------------------------------------------------------
function make_flake_visible_proc() {
}
//-------------------------------------------------------------------------
// storm proc - turn storm on/off
//-------------------------------------------------------------------------
function storm_proc() {
}
}
//-------------------------------------------------------------------------
// get the named layer
//-------------------------------------------------------------------------
function get_layer_by_name(id) {
}
}
//-------------------------------------------------------------------------
// santa"s private movement
//-------------------------------------------------------------------------
function move_santa() {
}
//-------------------------------------------------------------------------
// snowflake"s private movement
//-------------------------------------------------------------------------
function move_snow() {
}
//-------------------------------------------------------------------------
// move a layer
//-------------------------------------------------------------------------
function move_to(obj, x, y, visible) {
}
}
}
//-------------------------------------------------------------------------
// initialize all objects & timer
//-------------------------------------------------------------------------
function start() {
}
/* file-variable settings for Emacsen editors
body {
}
a { color:#ffffff; text-decoration:none; font-weight:bold; }
a:link { color:#ffffff; }
a:visited { color:#ffffff; }
a:active { color:#ffffff; }
a:hover { color:#ffffff; }
</HEAD>
<BODY BGCOLOR=#515170 COLOR=#ffffff vlink=#0000ff>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jsSnow-0.4.zip">jsSnow-0.4.zip( 10 k)</a>
/*
DO NOT USE A TILED BACKGROUND IMAGE ON THE PAGE USING THIS SCRIPT.
It causes a lagging effect even on a modern computer.
Paste this style sheet to the head of your page or add
its contents to an existing one.
EXCEPT for background-color in #content,
do not alter or add to #content or #light!
<style type="text/css">
</style>
Paste this js link as the very last thing just before the </body></html> tags.
<script type="text/javascript" src="spotlight_part_2.js"></script>
Your content here.........
<script type="text/javascript" src="spotlight_part_2.js"></script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spotlight</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var noOpe = window.toString();
if (noOpe != "[object Object]"){
}
</script>
var noOpe = window.toString();
if (noOpe != "[object Object]"){
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
document.write("<\/div>");
var spotLightImage = new Image(124,124);
spotLightImage.src = "spotlight.gif";
var r,h,w,y,x,spotLightDiv,yourContentDiv;
var d = document;
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
var scy = (domSy)?r.pageYOffset:r.scrollTop;
var scx = (domSy)?r.pageXOffset:r.scrollLeft;
if (domWw){
var con_h,con_w;
if (!window.opera && d.documentElement &&
else{
}
var r_h = (con_h > h)?con_h:h;
var r_w = (con_w > w)?con_w:w;
yourContentDiv.height = r_h-20 + "px";
yourContentDiv.width = r_w-20 + "px";
}
function mouseControl(needed){
if (window.addEventListener){
}
if (window.attachEvent){
}
}
function mouse(e){
var scy = (domSy)?r.pageYOffset:r.scrollTop;
var scx = (domSy)?r.pageXOffset:r.scrollLeft;
if (!e) e = window.event;
if (typeof e.pageY == "number"){
}
else{
}
if (y >= (h+scy)-spotLightImage.height-5){
}
if (x >= (w+scx)-spotLightImage.width){
}
yourContentDiv.clip = "rect("+y+"px "+(x+spotLightImage.width)+"px "+(y+spotLightImage.height)+"px "+x+"px)";
yourContentDiv.visibility = "visible";
spotLightDiv.top = y + "px";
spotLightDiv.left = x + "px";
}
function reveal(){
mouseControl(false);
spotLightDiv.visibility = "hidden";
yourContentDiv.clip = "rect(auto auto auto auto)";
}
function init(){
yourContentDiv = document.getElementById("content").style;
spotLightDiv = document.getElementById("light").style;
winsize();
mouseControl(true);
}
function rld(){
window.location.reload();
//Not ideal but far too much messing about other wise!
}
if (window.addEventListener){
}
else if (window.attachEvent){
}
}//End.
}
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/spotlight.zip">spotlight.zip( 3 k)</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Type Writer 1.1</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#FF0000; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/type_writer11.htm
//*********************************************
//* Type Writer effect 1.1 *
//* This script create a type writer effect *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
function type()
{
for(var i=1; i<=text_type_len; i++)
{
}
dotype();
}
function dotype()
{
}
if (NS4 || IE4) {
}
//SHOW
function Show(layerName){
}
function blink()
{
if(j%2==0)
{
}
else
{
}
if(j<2)
{
j++
}
else
{
j--
}
}
type();
</script>
</head>
<body bgcolor="#FFFFFF">
Type Writer Effect 1.1
This is a modification of the <a href="type_writer.htm" class="link">Type Writer Effect</a> script. The new addition is the cursor while typing. </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Type Writer</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#FA5D00; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/type_writer.htm
//*********************************************
//* Type Writer effect *
//* This script create a type writer effect *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
window.onerror = null;
function type()
{
for(var i=1; i<=text_type_len; i++)
{
}
dotype();
}
function dotype()
{
}
if (NS4 || IE4) {
}
//SHOW
function Show(layerName){
}
type();
</script>
</head>
<body bgcolor="#FFFFFF">
Type Writer effect
This is a JavaScript that creates a type writer effect for a text like the one above. </body>
</html>
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
<HTML>
<HEAD>
<TITLE>onFilterChange Event Handler</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function init() {
}
function start() {
}
function finish() {
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
The completion of the first transition ("circle-in")
triggers the second ("circle-out").
<BUTTON onClick="location.reload()">Play It Again</BUTTON> </BODY>
</HTML>
if (c1 > 9){
vy=0;
vx+=70;
c1=0;
}
</source>
Animation: mouse doodle
<source lang="html4strict">
if (d.body &&
typeof d.body.clientWidth == "number")
ref2 = d.body;
pulseCounter[i]++;
if (pulseCounter[i] >= pulsePath.length){
pulseCounter[i] = 0;
}
pulse[i] = pulsePath[pulseCounter[i]];
ref[i].filter = "glow(color="+colours[i]+", strength="+pulse[i]+")";
ref[i].top = ry + Math.cos((20*Math.sin(v2/20))+i*70)*100*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
ref[i].left = rx + Math.sin((20*Math.sin(v2/20))+i*70)*180*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10) + pix;
</source>
Animation on several images
<source lang="html4strict">
aniframes[i] = new Image(); // Create an off-screen image
aniframes[i].src = "images/" + i + ".gif"; // Tell it what URL to load.
document.animation.src = aniframes[frame].src; // Display the current frame
frame = (frame + 1)%10; // Update the frame counter
timeout_id = setTimeout("animate()", 250); // Display next frame later.
<input type="button" value="Start"
onclick="if (timeout_id == null) animate();">
<input type="button" value="Stop"
onclick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
</source>
Animation: pretty
<source lang="html4strict">
followMouseSpeed = 0.1;
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
scy = ref.pageYOffset;
scx = ref.pageXOffset;
}
scy = ref.scrollTop;
scx = ref.scrollLeft;
}
if (typeof e.pageY == "number"){
y = e.pageY - msy;
x = e.pageX;
}
else{
y = e.clientY - msy;
x = e.clientX;
}
counter1 = idx;
counter2 += step2;
counter2 = 0;
ry = h-buff;
ry = buff;
rx = w-buff;
rx = buff;
colourStep();
counter3 = 0;
the_dots[i].top = ry + 70 * Math.cos(step1 + i * ev * pi) * Math.sin(step1/2) + scy + pix;
the_dots[i].left = rx + 70 * Math.sin(step1 + i * ev * pi) * Math.cos(1+step1/2) + scx + pix;
the_dots[i] = document.getElementById("dvs"+(idx+i)).style;
window.addEventListener("resize",winSize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onresize",winSize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
</source>
Animation: Random Movement
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
y = r.pageYOffset;
x = r.pageXOffset;
}
y = r.scrollTop;
x = r.scrollLeft;
}
newpath();
c1=0;
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
</source>
Animation: snow
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
y = r.pageYOffset;
x = r.pageXOffset;
}
y = r.scrollTop;
x = r.scrollLeft;
}
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);
y[i]+=dy;
x[i]+=dx;
if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;
currStep[i]+=step[i];
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
</source>
Animation: star
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
rst(i);
strs[i] = document.getElementById("stars"+(idx+i)).style;
rst(i);
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
</source>
Animation: three eyes
<source lang="html4strict">
if (typeof e.pageY == "number"){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
Will not work correctly if placed inside any div!
if (typeof e.pageY == "number"){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
if (typeof e.pageY == "number"){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
</body>
</html>
</source>
Animation: trio
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
y = r.pageYOffset;
x = r.pageXOffset;
}
y = r.scrollTop;
x = r.scrollLeft;
}
if (typeof e.pageY == "number"){
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
if (i < n-1){
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
</source>
Animation: welcome message
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
sy = r.pageYOffset;
sx = r.pageXOffset;
}
sy = r.scrollTop;
sx = r.scrollLeft;
}
currentStep = 10;
step = 8;
msgPos += jog;
clrPos += jog;
clrPos = 0;
running = false;
box.width = 1 + pix;
box.height = 1 + pix;
box.visibility = "hidden";
txt.width = 1 + pix;
txt.height = 1 + pix;
txt.visibility = "hidden";
clearTimeout(timer);
}
winsize();
box = document.getElementById("_box"+idx).style;
txt = document.getElementById("_txt"+idx).style;
dims();
dsply();
if (running){
winsize();
dims();
}
window.addEventListener("resize",rsz,false);
window.addEventListener("load",init,false);
window.attachEvent("onresize",rsz);
window.attachEvent("onload",init);
</source>
Animation with JSTween
<source lang="html4strict">
* Redistributions of source code must retain the above copyright
* Redistributions in binary form must reproduce the above
* Neither the name of the author nor the names of contributors may
var a = new Array() ;
var l = arguments.length ;
for(var i = 2 ; i < l ; i++) a[i - 2] = arguments[i] ;
return function() {
var aP = [].concat(arguments, a) ;
f.apply(o, aP);
}
this.init(obj, prop, func, begin, finish, duration, suffixe)
this.prevTime = this._time;
if (t > this.getDuration()) {
if (this.looping) {
this.rewind (t - this._duration);
this.update();
this.broadcastMessage("onMotionLooped",{target:this,type:"onMotionLooped"});
} else {
this._time = this._duration;
this.update();
this.stop();
this.broadcastMessage("onMotionFinished",{target:this,type:"onMotionFinished"});
}
} else if (t < 0) {
this.rewind();
this.update();
} else {
this._time = t;
this.update();
}
return this._time;
this._duration = (d == null || d <= 0) ? 100000 : d;
return this._duration;
this.prevPos = this._pos;
var a = this.suffixe != "" ? this.suffixe : "";
this.obj[this.prop] = Math.round(p) + a;
this._pos = p;
this.broadcastMessage("onMotionChanged",{target:this,type:"onMotionChanged"});
if (t == undefined) t = this._time;
return this.func(t, this.begin, this.change, this._duration);
this.change = f - this.begin;
return this.begin + this.change;
if (!arguments.length) return;
this._listeners = new Array();
this.addListener(this);
if(suffixe) this.suffixe = suffixe;
this.obj = obj;
this.prop = prop;
this.begin = begin;
this._pos = begin;
this.setDuration(duration);
if (func!=null && func!="") {
this.func = func;
}
this.setFinish(finish);
this.rewind();
this.startEnterFrame();
this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"});
//alert("in");
this.stop();
this._time = (t == undefined) ? 0 : t;
this.fixTime();
this.update();
this._time = this._duration;
this.fixTime();
this.update();
this.setPosition(this.getPosition(this._time));
}
this.stopEnterFrame();
this.isPlaying = true;
this.onEnterFrame();
if(this.isPlaying) {
this.nextFrame();
setTimeout(Delegate.create(this, this.onEnterFrame), 0);
}
this.setTime((this.getTimer() - this._startTime) / 1000);
}
this.stopEnterFrame();
this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"});
this.isPlaying = false;
this.begin = this._pos;
this.setFinish(finish);
if (this._duration != undefined)
this.setDuration(duration);
this.start();
this.fixTime();
this.startEnterFrame();
this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionResumed"});
this.continueTo(this.begin,this._time);
this.removeListener (o);
return this._listeners.push(o);
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
var arr = new Array();
for(var i = 0; i < arguments.length; i++){
arr.push(arguments[i])
}
var e = arr.shift();
var a = this._listeners;
var l = a.length;
for (var i=0; i<l; i++){
if(a[i][e])
a[i][e].apply(a[i], arr);
}
this._startTime = this.getTimer() - this._time * 1000;
return new Date().getTime() - this._time;
if (s == undefined) var s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
if (s == undefined) var s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
if (s == undefined) var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (!a || a < Math.abs(c)) {
a=c; var s=p/4;
}
else
var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
}
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) var p=d*(.3*1.5);
if (!a || a < Math.abs(c)) {var a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
return c - Tween.bounceEaseOut (d-t, 0, c, d) + b;
}
if (t < d/2) return Tween.bounceEaseIn (t*2, 0, c, d) * .5 + b;
else return Tween.bounceEaseOut (t*2-d, 0, c, d) * .5 + c*.5 + b;
}
return c*(t/=d)*t*t*t*t + b;
}
return c*(t/=d)*t + b;
}
return -c *(t/=d)*(t-2) + b;
}
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
return c*(t/=d)*t*t*t*t + b;
}
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
* Redistributions of source code must retain the above copyright
* Redistributions in binary form must reproduce the above
* Neither the name of the author nor the names of contributors may
this.targetObject = obj;
this.targetProperty = property;
this.txt = txt;
if (func!=null && func!="") {
this.func = func;
}
this.init(new Object(),"x",func,0,txt.length,duration);
var v = evt.target._pos;
this.targetObject[this.targetProperty] = this.txt.substr(0,v);
* Redistributions of source code must retain the above copyright
* Redistributions in binary form must reproduce the above
* Neither the name of the author nor the names of contributors may
var a = new Array() ;
var l = arguments.length ;
for(var i = 2 ; i < l ; i++) a[i - 2] = arguments[i] ;
return function() {
var aP = [].concat(arguments, a) ;
f.apply(o, aP);
}
this.children = new Array();
this.currentChildIndex = 0;
this._listeners = new Array();
this.nextObject = new Object();
this.addListener(this);
this.children.push(tween)
var a = this.children;
var i = a.length;
while (i--) {
if (a[i] == tween) {
a.splice (i, 1);
return true;
}
}
return false;
this.rewind();
this.play();
this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"});
this.children[this.currentChildIndex].removeListener(this.nextObject);
if(this.currentChildIndex < this.children.length-1){
this.currentChildIndex++;
this.play();
}
else{
this.stop();
this.broadcastMessage("onMotionFinished",{target:this,type:"onMotionFinished"});
}
this.nextObject = new Object();
this.nextObject.onMotionFinished = Delegate.create(this, this.next);
this.children[this.currentChildIndex].addListener(this.nextObject);
this.children[this.currentChildIndex].start();
this.children[this.currentChildIndex].stop();
this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"});
this.children[this.currentChildIndex].removeListener(this.nextObject);
this.currentChildIndex = 0;
for(var i = 0; i < this.children.length; i++){
this.children[i].rewind();
}
this.children[this.currentChildIndex].removeListener(this.nextObject);
for(var i = 0; i < this.children.length; i++){
this.children[i].fforward();
}
this.currentChildIndex = this.children.length - 1;
this.children[this.currentChildIndex].resume();
this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionStopped"});
this.removeListener (o);
return this._listeners.push(o);
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
var arr = new Array();
for(var i = 0; i < arguments.length; i++){
arr.push(arguments[i])
}
var e = arr.shift();
var a = this._listeners;
var l = a.length;
for (var i=0; i<l; i++){
if(a[i][e])
a[i][e].apply(a[i], arr);
}
* Redistributions of source code must retain the above copyright
* Redistributions in binary form must reproduce the above
* Neither the name of the author nor the names of contributors may
var a = new Array() ;
var l = arguments.length ;
for(var i = 2 ; i < l ; i++) a[i - 2] = arguments[i] ;
return function() {
var aP = [].concat(arguments, a) ;
f.apply(o, aP);
}
this.children = new Array();
this.numChildren = 0;
this._listeners = new Array();
this.addListener(this);
this.children.push(tween)
this.numChildren++;
this.play();
this.broadcastMessage("onMotionStarted", {target:this, type:"onMotionStarted"});
for(var u = 0; u < this.numChildren; u++){
if(u==(this.numChildren-1)){
this.endObject = new Object();
this.endObject.onMotionFinished = Delegate.create(this, this.end);
this.children[u].addListener(this.endObject);
}
this.children[u].start();
}
this.children[this.numChildren-1].removeListener(this.endObject);
this.broadcastMessage("onMotionFinished", {target:this, type:"onMotionFinished"});
this.enumAction("stop");
this.broadcastMessage("onMotionStopped", {target:this, type:"onMotionStopped"});
}
this.enumAction("rewind");
}
this.enumAction("fforward");
}
this.enumAction("resume");
this.broadcastMessage("onMotionResumed", {target:this, type:"onMotionResumed"});
}
this.enumAction("yoyo");
}
for(var u = 0; u < this.numChildren; u++){
this.children[u][action]();
}
this.removeListener (o);
return this._listeners.push(o);
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
var arr = new Array();
for(var i = 0; i < arguments.length; i++){
arr.push(arguments[i])
}
var e = arr.shift();
var a = this._listeners;
var l = a.length;
for (var i=0; i<l; i++){
if(a[i][e])
a[i][e].apply(a[i], arr);
}
* Redistributions of source code must retain the above copyright
* Redistributions in binary form must reproduce the above
* Neither the name of the author nor the names of contributors may
this.targetObject = obj;
this.targetProperty = prop;
this.fromColor = fromColor;
this.toColor = toColor;
this.init(new Object(),"x",func,0,100,duration);
this.listenerObj = new Object();
this.listenerObj.onMotionChanged = Delegate.create(this,this.onColorChanged);
this.addListener(this.listenerObj);
this.currentColor = this.getColor(this.fromColor,this.toColor,this._pos);
this.targetObject[this.targetProperty] = this.currentColor;
var r1=this.hex2dec(start.slice(0,2));
var g1=this.hex2dec(start.slice(2,4));
var b1=this.hex2dec(start.slice(4,6));
var r2=this.hex2dec(end.slice(0,2));
var g2=this.hex2dec(end.slice(2,4));
var b2=this.hex2dec(end.slice(4,6));
var pc = percent/100;
r= Math.floor(r1+(pc*(r2-r1)) + .5);
g= Math.floor(g1+(pc*(g2-g1)) + .5);
b= Math.floor(b1+(pc*(b2-b1)) + .5);
return("#" + this.dec2hex(r) + this.dec2hex(g) + this.dec2hex(b));
var tg = document.getElementById("debug");
var tg2 = document.getElementById("debug2");
var tg3 = document.getElementById("debug3");
//I think putting the text in a hidden element is a good practise for site indexing
var ex_txt = document.getElementById("LoremIpsum").innerHTML;
t1 = new TextTween(tg, "value", ex_txt, Tween.strongEaseOut, 2);
t2 = new TextTween(tg2, "value", ex_txt, Tween.strongEaseOut, 2);
t3 = new TextTween(tg3, "value", ex_txt, Tween.strongEaseOut, 2);
t4 = new ColorTween(tg.style, "color", Tween.strongEaseOut, "000000", "FF0000", 2);
seq1 = new Sequence();
seq1.addChild(t1);
seq1.addChild(t4);
seq1.addChild(t2);
seq1.addChild(t3);
par1 = new Parallel();
par1.addChild(t1);
par1.addChild(t2);
par1.addChild(t3);
par1.addChild(t4);
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Col 1
Col 2
Col 3
Sequence
Parallel
Code
function init(){
//declaring textareas
var tg = document.getElementById("debug");
var tg2 = document.getElementById("debug2");
var tg3 = document.getElementById("debug3");
//I think putting the text in a hidden element is a good practise for site indexing
var ex_txt = document.getElementById("LoremIpsum").innerHTML;
//creating the 3 TextTween instances
t1 = new TextTween(tg, "value", ex_txt, Tween.strongEaseOut, 2);
t2 = new TextTween(tg2, "value", ex_txt, Tween.strongEaseOut, 2);
t3 = new TextTween(tg3, "value", ex_txt, Tween.strongEaseOut, 2);
//colorTween to show combination of tween types
t4 = new ColorTween(tg.style, "color", Tween.strongEaseOut, "000000", "FF0000", 2);
//creating a Tween sequence
seq1 = new Sequence();
seq1.addChild(t1);
seq1.addChild(t4);
seq1.addChild(t2);
seq1.addChild(t3);
//creating a Parralel for a set of Tweens to work together
par1 = new Parallel();
par1.addChild(t1);
par1.addChild(t2);
par1.addChild(t3);
par1.addChild(t4);
}
</source>
Animation: wriggly
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
y = r.pageYOffset;
x = r.pageXOffset;
}
y = r.scrollTop;
x = r.scrollLeft;
}
for (i = 0; i < num; i++){
if (i < num-1){
temp1[i].top = parseFloat(temp2[i].top) + fcen + pix;
temp1[i].left = parseFloat(temp2[i].left) + fcen + pix;
}
else{
temp1[i].top = y + scrl(0) + pix;
temp1[i].left = x + scrl(1) + pix;
}
}
newpath();
c1=0;
temp1[i] = document.getElementById("worm"+(idx+i)).style;
if (i < num-1)
temp2[i] = document.getElementById("worm"+(idx+(i+1))).style;
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
</source>
Attack animation
<source lang="html4strict">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.add("dynapi.fx.CircleAnimation","circleanim.js",["Thread","dynapi.functions.Math"]);
dynapi.library.include("dynapi.library");
dynapi.library.include("dynapi.api");
dynapi.library.include("PathAnimation");
dynapi.library.include("CircleAnimation");
dynapi.library.include("TimerX");
dynapi.library.include("MotionX");
myTarget= new DynLayer(null,50,50,5,5,"red")
myTarget2= new DynLayer(null,100,100,5,5,"blue")
path = new PathAnimation(myTarget);
path2 = new PathAnimation(myTarget2);
// path 3 generated circle path starting at 180degrees about point (250,250)
// note: circleanim is not required in order to use pathanim
circle = new CircleAnimation();
circle.setRadius(50);
circle.setAngle(180);
circle.setAngleIncrement(10);
circlepath = circle.generatePath(250,150);
path.add(circlepath,true)
path.playAnimation(0)
circlepath = circle.generatePath(150,150);
path2.add(circlepath,true)
path2.playAnimation(0)
var img = dynapi.functions.getImage("./dynapiexamples/images/eicon3.gif");
mySource =new DynLayer(img.getHTML(),100,100,32,32)
//------- Events ------------------
myListener = {};
myListener.ontimer=function(e){
var me=e.getSource();
var x=Math.random()*400;y=Math.random()*200
//if (x<=me.x) {me.dir=0}else{me.dir=2}
me.slideTo(x,y)
status="c"
}
myListener.onmove=function(e){
var i,anim
var me=e.getSource();
var anim=path.pathPlaying
var circlepath = circle.generatePath(me.x,me.y);
for (i=0;i<anim.length;i++) {
anim[i]=circlepath[i]
}
anim=path2.pathPlaying
circlepath = circle.generatePath(me.x,me.y);
x=Math.random()*50
for (i=0;i<anim.length;i++) {
anim[i]=circlepath[i]+x
}
}
mySource.addEventListener(myListener)
mySource.startTimer(1500)
dynapi.document.addChild(myTarget)
dynapi.document.addChild(myTarget2)
dynapi.document.addChild(mySource)
dynapi.document.insertAllChildren();
</source>
Auto lotto dip
<source lang="html4strict">
<script type="text/javascript">
// Lottery Number Picker - http://www.btinternet.ru/~kurt.grigg/javascript
if ((document.getElementById && document.firstChild) &&
window.addEventListener || window.attachEvent){
(function(){
//Choose your lottery format here.
var pick = 6;
var from = 1;
var to = 49;
var buttonText = "Lotto Lucky Dip";
var initialText = "Your Lucky Numbers";
//Scroll down to alter colours and size.
var playing = false;
var timer = null;
var counter = 0;
function numsort(n1,n2) {
if (n1 < n2) x=-1;
else if (n1 > n2) x=1;
else x=0;
return x;
}
function justOnce(b){
controlButton.blur();
if (playing){
return false;
}
lotto();
}
alert("from value must be less than to value");
return false;
}
alert("Error - You want "+pick+" numbers.\n\n"
+"The range you have entered is from "+from+" to "+to+".\n"
+"This leaves "+(rng+1)+" available random numbers.");
return false;
}
for (j=0; j < pick; j){
if (number!=draw[j]){
j++;
}
else{
number = parseInt(from + Math.random() * e);
j = 0;
}
}
disp = dum += (draw[i]+" ");
clearTimeout(timer);
playing=false;
counter=0;
}
controlButton.addEventListener("click",justOnce,false);
controlButton.attachEvent("onclick",justOnce);
</source>
Big static eyes
<source lang="html4strict">
</head>
<body>
if (typeof e.pageY == "number"){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
</source>
Circle Animation
<source lang="html4strict">
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
}
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element"s clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element"s clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
// "obj" is the positionable object
var obj = getRawObject(layerName);
// set fudgeFactor values only first time
if (fudgeFactor.top == -1) {
if ((typeof obj.offsetTop == "number") && obj.offsetTop > 0) {
fudgeFactor.top = obj.offsetTop;
fudgeFactor.left = obj.offsetLeft;
} else {
fudgeFactor.top = 0;
fudgeFactor.left = 0;
}
if (obj.offsetWidth && obj.scrollWidth) {
if (obj.offsetWidth != obj.scrollWidth) {
obj.style.width = obj.scrollWidth;
}
}
}
var x = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2));
var y = 50;
shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
show(obj);
intervalID = setInterval("goAround("" + layerName + "")", 1);
var obj = getRawObject(layerName);
var x = Math.round(getObjectLeft(obj) + Math.cos(intervalCount * (Math.PI/18)) * 10);
var y = Math.round(getObjectTop(obj) + Math.sin(intervalCount * (Math.PI/18)) * 10);
shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
if (intervalCount++ == 36) {
clearInterval(intervalID);
}
</source>
Dancing Text (IE)
<source lang="html4strict">
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var time_length =100; //Scroll speed
var begin_pos=55;
var left_pos=125;
var jump_height=3;
var i;
var k=0;
var text_dance = "Dancing Text by Premshree Pillai";
var text_dance_len= text_dance.length;
//IF STRING LENGTH IS EVEN
if(text_dance_len%2==0)
{
text_dance_len+=1;
}
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
if (NS4 || IE4) {
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
if(k%2==0)
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".top="" + (begin_pos+jump_height) + """);
}
else
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".top=""+ (begin_pos-jump_height) +""");
}
i++;
if(k<1)
{
k++;
}
else
{
k--
}
setTimeout("Scroll(""+layerName+"")",time_length);
}
You can change the text by changing the variable text_dance.
The distance of the text from top can be changed by changing the variable begin_pos (Here it is 55). The distance of the text from the left can be changed by changing the variable left_pos (Here it is 125). The jump height can be changed by changing the variable jump_height (Here it is 3). You can also change the speed by changing the variable time_length.
</source>
Flash animation in Javascript
<source lang="html4strict">
.red {
color: red;
border: 2px solid red;
}
.green {
color: green;
border: 2px solid yellow;
}
.yellow {
color: yellow;
border: 2px solid blue;
}
.blue {
color: blue;
border: 2px solid green;
}
classes = ["red", "green", "yellow", "blue"];
// reset counter to 0 if it reaches 3; otherwise increment by 1
currColor = (currColor == 3) ? 0 : ++currColor;
// set style color to new color from array
document.getElementById("hot1").className = classes[currColor];
// invoke this function again until total = 27 so it ends on red
if (totalCycles++ < 27) {
intervalID = setTimeout("cycleColors()", 100);
} else {
clearTimeout(intervalID);
}
Welcome to the Hot Zone Web Site
</source>
Flash animation in JavaScript: Changing style Properties
<source lang="html4strict">
#hot1 {color:red}
colors = ["red", "green", "yellow", "blue"];
// reset counter to 0 if it reaches 3; otherwise increment by 1
currColor = (currColor == 3) ? 0 : ++currColor;
// set style color to new color from array
document.getElementById("hot1").style.color = colors[currColor];
// invoke this function again until total = 27 so it ends on red
if (totalCycles++ < 27) {
intervalID = setTimeout("cycleColors()", 100);
} else {
clearTimeout(intervalID);
}
Welcome to the Hot Zone Web Site
</source>
Following eyes
<source lang="html4strict">
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
y = r.pageYOffset;
x = r.pageXOffset;
}
y = r.scrollTop;
x = r.scrollLeft;
}
if (typeof e.pageY == "number"){
my = e.pageY - msy;
mx = e.pageX;
}
else{
my = e.clientY - msy;
mx = e.clientX;
}
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
makefollow();
setTimeout(move,30);
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
</source>
Framework for creating CSS-based animations
<source lang="html4strict">
* AnimateCSS.js:
* This file defines a function named animateCSS(), which serves as a framework
* for creating CSS-based animations. The arguments to this function are:
*
* element: The HTML element that is to be animated.
* numFrames: The total number of frames in the animation.
* timePerFrame: The number of milliseconds to display each frame.
* animation: An object that defines the animation; described below.
* whendone: An optional function to call when the animation finishes.
* If specified, this function is passed element as its argument.
*
* The animateCSS() function simply defines an animation framework. It is the
* properties of the animation object that specify the animation to be
* done. Each property should have the same name as a CSS style property. The
* value of each property must be a function that returns values for that
* style property. Each function is passed the frame number and the total
* amount of elapsed time, and it can use these to compute the style value it
* should return for that frame. For example, to animate an image so that it
* slides in from the upperleft, you might invoke animateCSS as follows:
*
* animateCSS(image, 25, 50, // Animate image for 25 frames of 50ms each
* { // Set top and left attributes for each frame as follows
* top: function(frame,time) { return frame*8 + "px"; },
* left: function(frame,time) { return frame*8 + "px"; }
* });
*
**/
var frame = 0; // Store current frame number
var time = 0; // Store total elapsed time
// Arrange to call displayNextFrame() every timePerFrame milliseconds.
// This will display each of the frames of the animation.
var intervalId = setInterval(displayNextFrame, timePerFrame);
// The call to animateCSS() returns now, but the line above ensures that
// the nested function defined below will be invoked once for each frame
// of the animation. Because this function is defined inside
// animateCSS(), it has access to the arguments and local variables of
// animateCSS() even though it is invoked after that function has returned!
function displayNextFrame() {
if (frame >= numFrames) { // First, see if we"re done
clearInterval(intervalId); // If so, stop calling ourselves
if (whendone) whendone(element); // Invoke whendone function
return; // And we"re finished
}
// Now loop through all properties defined in the animation object
for(var cssprop in animation) {
// For each property, call its animation function, passing the
// frame number and the elapsed time. Use the return value of the
// function as the new value of the corresponding style property
// of the specified element. Use try/catch to ignore any
// exceptions caused by bad return values.
try {
element.style[cssprop] = animation[cssprop](frame, time);
} catch(e) {}
}
frame++; // Increment the frame number
time += timePerFrame; // Increment the elapsed time
}
{ // Set top and left attributes for each frame as follows
top: function(frame,time) { return frame*8 + "px"; },
left: function(frame,time) { return frame*8 + "px"; }
});
</source>
JavaScript Animation
<source lang="html4strict">
Simple Animation
<FORM>
<INPUT TYPE="BUTTON" NAME="faster" VALUE="Faster" ONCLICK="goFaster()">
<INPUT TYPE="BUTTON" NAME="slower" VALUE="Slower" ONCLICK="goSlower()">
</FORM>
</BODY>
</HTML>
</source>
JavaScript Ticker 1.2 (IE)
<source lang="html4strict">
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var i=0;
var top_pos = 60;
var left_pos = 200;
var time_length = 2000;
var div_name = "qiksearch";
var ticker_msg = new Array(
"Welcome to Qiksearch",
"Intellisearch Bar NOW!",
"Premshree Pillai",
"Meta Tag Generator Online",
"Free JavaScripts" );
var ticker_url = new Array(
"http://www.qiksearch.ru",
"http://intellisearch.cjb.net",
"http://premshree.qik.cjb.net",
"http://metataggen.qik.cjb.net",
"http://www.qiksearch.ru/javascripts.htm" );
" + "if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
if(i<ticker_len)
{
if(i==0)
{
eval(layerRef+"[""+div_name+(ticker_len-1)+""]"+
styleSwitch+".visibility="hidden"");
}
if(i>0)
{
eval(layerRef+"[""+div_name+(i-1)+""]"+
styleSwitch+".visibility="hidden"");
}
eval(layerRef+"[""+div_name+i+""]"+
styleSwitch+".visibility="visible"");
}
if(i<ticker_len-1)
{
i++;
}
else
{
i=0;
}
setTimeout("tick()",time_length);
}
Change the position of the ticker by changing the variables top_pos and left_pos. You can change the ticker speed by changing the value of the variable time_length. (Here it is 2000, which means that the ticker message will change every 2000 milliseconds, i.e every 2 seconds).
</source>
Link Hint Scroller 2.0 (IE)
<source lang="html4strict">
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
var scroll_length = 150; //The scroll length
var time_length =50; //Scroll delay in milliseconds
var begin_pos = 260; //Start position of scroll hint
var i=begin_pos;
var j=i;
var scroll_dir = "right"; // To scroll left use "left"
// To scroll right use "right"
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
if (NS4 || IE4)
{
if(scroll_dir=="right")
{
if(i<(begin_pos+scroll_length))
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+layerName+""]"+ styleSwitch+".left=""+(i)+""");
i++;
j++;
}
}
if(scroll_dir=="left")
{
if(i>(begin_pos-scroll_length))
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+layerName+""]"+ styleSwitch+".right=""+(-i)+""");
i--;
j--;
}
}
if(i==j)
{
setTimeout("Scroll(""+layerName+"")",time_length);
}
}
if(scroll_dir=="right")
{
i=begin_pos+scroll_length;
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".left=""+(i)+""");
hideLayer(layerName);
}
if(scroll_dir=="left")
{
i=begin_pos-scroll_length;
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".right=""+(-i)+""");
hideLayer(layerName);
}
i=begin_pos;
j=i;
if (NS4 || IE4)
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="hidden"");
}
To use this Javascript,view the source of this document. Firstly you must copy the script
and place it in the head section. Then you must copy the <DIV> section and place it wherever you want it in the body. All the required section are marked by the comments <!--BEGIN REQUIRED--> and <!--END REQUIRED-->
scroll_length : Scroll length variable (150 here)
time_length : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)
begin_pos : Beginning position of hint (300 here)
New in Version 2.0
In this version, you can change the direction of scrolling.
scroll_dir : Direction of scrolling ("right" here)
</source>
Lotto number draw
<source lang="html4strict">
bln.ply.focus();
alert("In progress:\nMust click reset to change numbers.\nReturning to game....");
bln.user.value = user_disp;
}
if (playing){
alert("Already playing.....");
return false;
}
else{
usercheck();
}
if (playing){
bln.ply.focus();
}
//Numbers only.
for (i=0; i < d1.length; i++){
var tmpd1 = d1.substring(i, i + 1);
if ((tmpd1 < "0" || "9" < tmpd1) && tmpd1 != " "){
alert("Numbers only.");
d1a.focus();
d1a.select();
return false;
}
}
//Strip all initial space.
c1 = 0;
for (i=0; i < d1.length; i++){
if (d1.charAt(i) != " "){
break;
}
else{
c1++;
}
}
//Strip all inner spaces except 1.
d2 = d1.split("");
d3 = "";
for (i=0; i < d2.length; i++){
if ((d2[i+1]==" ") && (d2[i+2]==" ")){
d2[i+1]="";
}
d3 += (d2[i]);
}
//Strip all end spaces.
d3 = d3.substring(0,d3.length);
if (d3.charAt(d3.length-1) == " "){
d3=d3.substring(0,d3.length-1);
}
bln.user.value=d3;
//Check if empty.
if (d3.length == 0){
alert("Enter your numbers first.");
d1a.focus();
return false;
}
//Check for 6 nums only.
d4 = d3.split(" ");
if (d4.length != 6){
alert("You must pick 6 numbers. You have picked "+d4.length+".");
d1a.focus();
d1a.select();
return false;
}
//Check range.
for (i=0; i < d4.length; i++){
if ((d4[i] < 1 || d4[i] > 49)){
alert("Pick numbers 1 to 49 only.");
d1a.focus();
d1a.select();
return false;
}
}
//Strip leading zeros.
cnt1 = new Array();
for (i=0; i < d4.length; i++){
cnt1[i]=-1;
}
for (i=0; i < d4.length; i++){
for (j=0; j < d4[i].length; j++){
if ((d4[i].substring(0,j) == 0)){
cnt1[i]++;
}
}
}
for (i=0; i < d4.length; i++){
d4[i] = d4[i].substring(cnt1[i],d4[i].length);
d4[i]=parseInt(d4[i]);
}
d4.sort(numsort);
user_disp = "";
for (i=0; i < d4.length; i++){
user_disp+=d4[i]+" ";
}
bln.user.value=user_disp;
//Check for same numbers.
for (i=0; i < d4.length; i++){
for (j=0; j < d4.length; j++){
if (j != i){
if (d4[i] == d4[j]){
alert("Each number must be different");
d1a.focus();
d1a.select();
return false;
}
}
}
}
if (confirm("Happy with your numbers?")){
lotto();
}
else{
d1a.focus();
d1a.select();
}
for (j=0; j < 6; j){
if (r_nums != nums[j]) j++;
else{
r_nums = parseInt(1 + Math.random() * 49);
j=0;
}
}
if (b_ball!=nums[j]){
j++;
}
else{
b_ball=Math.round(1+Math.random()*48);
j=0;
}
//For display only.
t_nums = nums.toString();
t_nums = t_nums.split(",");
for (i=0; i < t_nums.length; i++){
t_nums[i] = t_nums[i]+" ";
disp_nums = dum1+=t_nums[i];
}
bln.f.value=disp_nums;
bln.b.value=b_ball;
for (i=0; i < 6; i++){
if (b_ball == d4[i]){
bonus=true;
}
for (j=0; j < 6; j++){
if (nums[i] == d4[j]){
find++;
}
}
}
</source>
Moving an Airplane Across a Web Page
<source lang="html4strict">
if(document.getElementById) {
var planeStyle = document.getElementById("plane").style
window.defaultStatus = "("+planeStyle.left+","+planeStyle.top+")"
if(parseInt(planeStyle.top) < 10) {
planeStyle.left = 0
planeStyle.top = 400
}else{
planeStyle.left = parseInt(planeStyle.left) + 8
planeStyle.top = parseInt(planeStyle.top) - 5
}
}else if(document.all) {
var planeStyle=window.document.all.plane.style
window.defaultStatus = "("+planeStyle.posLeft+","+planeStyle.posTop+")"
if(planeStyle.posTop < 10) {
planeStyle.posLeft = 0
planeStyle.posTop = 400
}else{
planeStyle.posLeft += 8
planeStyle.posTop -= 5
}
}
Welcome to the Aviation Home Page!
</source>
Periodically Updating the Text Displayed by an HTML Element
<source lang="html4strict">
"Notice anything different?",
"The text you are looking at has changed.",
"This is a handy way of sending messages to your users."
window.setInterval("displayMessage()", milliseconds)
if(document.getElementById != null) {
var heading = document.getElementById("scrollme")
heading.firstChild.nodeValue = msgs[msgIX]
}else{
if(navigator.appName == "Microsoft Internet Explorer") {
var heading = document.all.item("scrollme")
heading.innerText = msgs[msgIX]
}
}
++msgIX
msgIX %= msgs.length
Watch this text very carefully!
</source>
Popup window animation (fly across screen)
<source lang="html4strict">
BOUNCE!
"", "",
"width=" + w + ",height=" + h);
// If the user closed the window, stop the animation.
if (win.closed) {
clearInterval(intervalID);
return;
}
// Bounce if we have reached the right or left edge.
if ((x+dx > (screen.availWidth - w)) || (x+dx < 0)) dx = -dx;
// Bounce if we have reached the bottom or top edge.
if ((y+dy > (screen.availHeight - h)) || (y+dy < 0)) dy = -dy;
// Update the current position of the window.
x += dx;
y += dy;
// Finally, move the window to the new position.
win.moveTo(x,y);
onclick="clearInterval(intervalID); win.close();">
</source>
Right to left animation
<source lang="html4strict">
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
}
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element"s clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element"s clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
// "obj" is the positionable object
var obj = getRawObject(layerName);
// set fudgeFactor values only first time
if (fudgeFactor.top == -1) {
if ((typeof obj.offsetTop == "number") && obj.offsetTop > 0) {
fudgeFactor.top = obj.offsetTop;
fudgeFactor.left = obj.offsetLeft;
} else {
fudgeFactor.top = 0;
fudgeFactor.left = 0;
}
if (obj.offsetWidth && obj.scrollWidth) {
if (obj.offsetWidth != obj.scrollWidth) {
obj.style.width = obj.scrollWidth;
}
}
}
var y = Math.round((getInsideWindowHeight()/2) - (getObjectHeight(obj)/2));
stopPoint = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2));
shiftTo(obj, getInsideWindowWidth(), y - fudgeFactor.top);
show(obj);
intervalID = setInterval("glideToCenter("" + layerName + "")", 1);
var obj = getRawObject(layerName);
shiftBy(obj,-5,0);
if (getObjectLeft(obj) <= stopPoint) {
clearTimeout(intervalID);
}
</source>
Snow animation
<source lang="html4strict">
<script>
//---------------------------------------------------------------------------------------
Copyright (C) 2002 Mag. Dr. Nikolaus Klepp <dr.klepp@gmx.at>
Copyright (C) 2002 INOUE Hiroyuki <dombly@kc4.so-net.ne.jp>
Copyright (C) 2002 Heiko Feldker <hfeldker@web.de>
Release Id: 0.3n1+dombly1
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
navigator.appVersion.split(";")[1].substr(6) :
navigator.appVersion));
// specified as the ratio to snow flakes
// exept 0, which means santa won"t be pushed by storms
// (between [0:360]; default is (1,0), 90 is to go up )
flake_images[i] = new Image();
flake_images[i].src = flakeImageDir+"snow"+i+".gif";
var old = refresh_FperS;
refresh = Math.floor(timer_sum/timer_count*2)+10; // ms/Frame + spare
refresh_FperS = Math.floor(1000/refresh); // frames/second
santa_speed = santa_speed_PperS/refresh_FperS; // pixel/second --> pixel/frame
flake_speed = flake_speed_PperS/refresh_FperS; // pixel/second --> pixel/frame
storm_speed = storm_speed_PperS/refresh_FperS; // pixel/second --> pixel/frame
if (timer_id) window.clearInterval(timer_id); // adapt timer
timer_id = window.setInterval("move_snow_and_santa()",refresh);
// FRAMES PER SECOND DISPLAY: REMOVE IF NOT NEEDED
if(infoLayer){
if (old!=refresh_FperS) write_to_layer(infoLayer,refresh_FperS+"f/s");
}
// adapt speed - for smoothness
if (old != refresh_FperS) {
var ratio = old/refresh_FperS;
santaVY *= ratio;
for (i=0; i<flakes; i++) {
flakeSX[i] *= ratio;
flakeVX[i] *= ratio;
flakeVY[i] *= ratio;
}
}
timer_count /= 2; // moving medium
timer_sum /= 2;
window.clearInterval(flake_id);
flake_visible = true;
// keep ourself from restarting while running
window.clearInterval(storm_id);
if (storm_blowing == 0) {
// turn storm on
storm_blowing = (Math.random()<0.5) ? -1 : 1 ;
storm_YperX_current = Math.random()*storm_YperX;
// prepare values by trigonometrical functions - too heavy for move_snow()
var storm_theta = Math.atan(storm_YperX_current);
storm_v_cos = Math.cos(storm_theta);
storm_v_sin = Math.sin(storm_theta);
storm_id = window.setInterval("storm_proc()",storm_duration_S*1000.0);
} else {
// turn storm off
storm_blowing *= 0.7;
if ((Math.abs(storm_blowing)<0.05) || (!flake_visible)) {
storm_blowing = 0;
storm_id = window.setInterval("storm_proc()",storm_lag_S*1000.0);
} else {
storm_id = window.setInterval("storm_proc()",500.0);
}
}
// preapare movement vektor for snow, caused by storm
flakeDX = storm_v_cos*storm_speed*storm_blowing;
flakeDY = Math.abs(storm_v_sin*storm_speed*storm_blowing);
// preapare movement vektor for santa, caused by storm & santa_mass
if(santa_mass>0) {
santaDX = flakeDX/santa_mass;
santaDY = flakeDY/santa_mass;
} else {
santaDX=0;
santaDY=0;
}
//-------------------------------------------------------------------------
// create all layers & Objects
//-------------------------------------------------------------------------
function init_snow_and_santa() {
// create santa
santa = get_layer_by_name("santa0");
santaX = santa_init_x;
santaY = Math.random()*pageHeight;
santaSY = 0;
if (santa_direction != 0) {
santaMX = Math.cos(santa_direction/180*Math.PI);
santaMY = -Math.sin(santa_direction/180*Math.PI);
}
// create flake
for (var i=0; i<flakes; i++) {
flake[i] = get_layer_by_name("flake"+i);
flakeX[i] = Math.random()*pageWidth;
flakeY[i] = Math.random()*pageHeight;
flakeSX[i] = 0;
flakeVX[i] = 0;
flakeVIS[i] = flake_visible;
flakeVY[i] = 1;
}
if (op) { return document.getElementById(id); }
if (ns6) { return document.getElementById(id); }
if (ie4) { return document.all[id]; }
if (ns4) { return document.layers[id]; }
//-------------------------------------------------------------------------
// move all objects
//-------------------------------------------------------------------------
function move_snow_and_santa() {
var beginn = new Date().getMilliseconds();
move_santa();
move_snow();
var ende = new Date().getMilliseconds();
var diff = (beginn>ende?1000+ende-beginn:ende-beginn);
timer_sum += diff;
timer_count ++;
if (timer_count>10) {
rebuild_speed_and_timer();
}
var lmgn = -pageWidth*(1-santa_appearance)/santa_appearance;
var rmgn = pageWidth;
var h = pageHeight+santa_image.height;
// santa outside screen ?
if (santaX > rmgn) {
santaX = lmgn;
santaY = Math.random()*pageHeight;
santaSY = 0;
santaVY = 0;
} else if (santaX < lmgn) {
santaX = rmgn;
santaY = Math.random()*pageHeight;
santaSY = 0;
santaVY = 0;
} else if (santaY >= pageHeight) {
santaY -= h;
} else if (santaY < -santa_image.height) {
santaY += h;
} else {
santaX += santaMX * santa_speed + santaDX;
santaY += santaMY * santa_speed + santaDY;
}
// up-down-movement
santaSY --;
if (santaSY <= 0) {
santaSY = Math.random()*refresh_FperS*santa_TY;
santaVY = (2.0*Math.random()-1.0)*santa_YperX*santa_speed;
}
// move santa to new position
move_to(santa,santaX,santaY,(santaY<pageHeight- disappear_margin));
for (var i=0; i<flakes; i++) {
// flake outside screen ?
flakeX[i] += flakeVX[i] + flakeDX;
flakeY[i] += flakeVY[i] + flakeDY;
if (flakeY[i]>pageHeight-disappear_margin) {
flakeX[i] = Math.random()*pageWidth;
flakeY[i] = 0;
flakeVY[i] = flake_speed+Math.random()*flake_speed;
if (Math.random()<0.1) flakeVY[i] *= 2.0;
if (flake_visible) flakeVIS[i] = true;
}
// left-right- movement
flakeSX[i] --;
if (flakeSX[i] <= 0) {
flakeSX[i] = Math.random()*refresh_FperS*flake_TX;
flakeVX[i] = (2.0*Math.random()-1.0)*flake_XperY*flake_speed;
}
if (flakeX[i]<-disappear_margin)
flakeX[i] += pageWidth;
if (flakeX[i]>=(pageWidth-disappear_margin))
flakeX[i] -= pageWidth;
// move flake to new position
move_to(flake[i],flakeX[i],flakeY[i],flakeVIS[i]);
}
if (visible) {
if (op) {
obj.style.left = x+"px";
obj.style.top = y+"px";
// FIX THIS: SHOW DOES NOT WORK OPERA
obj.style.display = "block";
} else if (ie4) {
obj.style.pixelLeft = x;
obj.style.pixelTop = y;
obj.style.visibility= "visible";
} else if (ns4) {
obj.left = x;
obj.top = y;
obj.visibility = "show";
} else if (ns6) {
obj.style.left = x+"px";
obj.style.top = y+"px";
obj.style.display = "block";
}
} else {
if (ie4 || op) { obj.style.visibility = "hidden";}
if (ns4) { obj.visibility = "hide";}
if (ns6) { obj.style.display = "none";}
}
//-------------------------------------------------------------------------
// fill a layer with new content
// --- parameter: layer-name, new content
//-------------------------------------------------------------------------
function write_to_layer(layer,txt) {
if (op) {
// FIX THIS: DOES NOT WORK FOR OPERA
document.getElementById(layer).innerHTML = txt;
} else if (ie4) {
document.all[layer].innerHTML = txt;
} else if (ns4) {
document[layer].document.write(txt);
document[layer].document.close();
} else if (ns6) {
var over = document.getElementById(layer);
var range = document.createRange();
range.setStartBefore(over);
var domfrag = range.createContextualFragment(txt);
while (over.hasChildNodes()) {
over.removeChild(over.lastChild);
}
over.appendChild(domfrag);
}
//-------------------------------------------------------------------------
// size of page
//-------------------------------------------------------------------------
function get_page_dimension() {
if(op) {
pageOffX = 0;
pageOffY = 25;
pageWidth = innerWidth + pageOffX;
pageHeight = innerHeight + pageOffY;
} else if(ns6) {
pageOffX = scrollX;
pageOffY = scrollY;
pageWidth = innerWidth + pageOffX;
pageHeight = innerHeight + pageOffY;
} else if(ns4) {
pageOffX = window.pageXOffset;
pageOffY = window.pageYOffset;
pageWidth = innerWidth + pageOffX;
pageHeight = innerHeight + pageOffY;
} else if(ie4) {
pageOffX = document.body.scrollLeft;
pageOffY = document.body.scrollTop;
pageWidth = document.body.clientWidth + pageOffX;
pageHeight = document.body.clientHeight + pageOffY;
}
var a = "";
// santa"s private layer
a += " // each snowflake"s private layer
for (var i=0; i<flakes; i++) {
a += " }
// write private layers to destination layer - this works for opera,too
document.write(a);
// recalculate page dimension every second
window.setInterval("get_page_dimension()",1000);
get_page_dimension();
// init all objects
init_snow_and_santa();
// place snowflakes, santa & trees
rebuild_speed_and_timer(refresh);
// start the animation
timer_id = window.setInterval("move_snow_and_santa()",refresh);
storm_id = window.setInterval("storm_proc()",1800); // init with visible storm
flake_id = window.setInterval("make_flake_visible_proc()",2000); // after the storm, let snowflakes fall :-)
Local Variables:
tab-width: 4
End:
*/
</script>
<style TITLE="Contemporary" TYPE="text/css">
font-family: "Trebuchet Ms", Verdana, sans-serif;
font-weight: normal;
font-size: 10pt;
margin: 30px;
color: #c0c0c0;
background-color: #515170;
</style>
<title>jsSnow - XSnow for Webpages</title>
<SCRIPT>start();</SCRIPT>
jsSnow 0.4
Hey, what"s this? Looks like XSnow!
<img src=tannenbaum.gif style="float:left;">
Yes, it is. I was looking for a port of my favorite toy, but didn"t find any.
So I took the graphics from Rick Jansens Xsnow 1.40
(<a href=http://www.euronet.nl/~rja/>http://www.euronet.nl/~rja/</a>),
went to the kitchen, got me (Nikolaus Klepp, <a href=mailto:dr.klepp@gmx.at>dr.klepp@gmx.at</a>) a mixer, ice ... and here it is:
the first XSnow port to JavaScript!
</source>
Spot light
<source lang="html4strict">
Paste this js link IMMEDIATELY after the opening <body> tag.
<script type="text/javascript" src="spotlight_part_1.js"></script>
Example:
<body>
<script type="text/javascript" src="spotlight_part_1.js"></script>
if ((document.getElementById) && window.addEventListener || window.attachEvent){
document.body.style.backgroundColor = "#000000";
document.write("}
<script type="text/javascript">
//Spot Light http://www.btinternet.ru/~kurt.grigg/javascript
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
typeof d.documentElement.scrollHeight == "number" &&
d.documentElement.scrollHeight != 0){
con_h = d.documentElement.scrollHeight;
con_w = d.documentElement.scrollWidth;
}
if (d.body &&
typeof d.body.scrollHeight == "number"){
con_h = d.body.scrollHeight;
con_w = d.body.scrollWidth;
}
if (needed){
document.addEventListener("mousemove",mouse,false);
}
else{
document.removeEventListener("mousemove",mouse,false);
}
if (needed){
document.attachEvent("onmousemove",mouse);
}
else{
document.detachEvent("onmousemove",mouse);
}
y = e.pageY - spotLightImage.height/2;
x = e.pageX - spotLightImage.width/2;
y = e.clientY - spotLightImage.height/2 + scy;
x = e.clientX - spotLightImage.width/2 + scx;
y = (h+scy)-spotLightImage.height-5;
x = (w+scx)-spotLightImage.width;
window.addEventListener("load",init,false);
window.addEventListener("resize",rld,false);
window.attachEvent("onload",function(){init();});
window.attachEvent("onresize",function(){rld();});
</source>
Type Writer Effect 1.1 (IE)
<source lang="html4strict">
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var time_length =100; //Scroll speed
var begin_pos=55;
var left_pos=110;
var i=1;
var j=0;
var cursor_blink_speed=300;
var text_type = "Type Writer effect by Premshree Pillai";
var text_type_len= text_type.length;
var cursor_var="cursor";
var cursor_char="$"
setTimeout("Show(""+text_type+i+"")",time_length);
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
if (NS4 || IE4) {
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".left="" + (left_pos+10+15*i) + """);
if(i>=text_type_len)
{
blink();
}
if(i<text_type_len)
{
i++;
dotype();
}
}
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".visibility="visible"");
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".visibility="hidden"");
setTimeout("blink()",cursor_blink_speed);
You can change the text by changing the variable text_type.
The distance of the text from top can be changed by changing the variable begin_pos (Here it is 55). The distance of the text from the left can be changed by changing the variable left_pos (Here it is 110). You can also change the speed of typing by changing the variable time_length.
After all the text is typed out the cursor blinks. The blink speed can be changed by changing the value of the variable cursor_blink_speed (Here it is 300). You can also change the cursor character by changing the variable cursor_char (Here it is $).
</source>
Type Writer effect (IE)
<source lang="html4strict">
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer"
&& bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer"
&& bVer < 4);
var time_length =100; //Scroll speed
var begin_pos=55;
var left_pos=110;
var i=1;
var text_type = "Type Writer effect by Premshree Pillai";
var text_type_len= text_type.length;
setTimeout("Show(""+text_type+i+"")",time_length);
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
if (NS4 || IE4) {
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
if(i<text_type_len)
{
i++;
dotype();
}
}
You can change the text by changing the variable text_type.
The distance of the text from top can be changed by changing the variable begin_pos (Here it is 55). The distance of the text from the left can be changed by changing the variable left_pos (Here it is 110). You can also change the speed of typing by changing the variable time_length.
</source>
Using the onFilterChange Event Handler
<source lang="html4strict">
image1.filters[0].apply()
image2.filters[0].apply()
start()
image1.style.visibility = "hidden"
image1.filters[0].play()
// verify that first transition is done (optional)
if (image1.filters[0].status == 0) {
image2.style.visibility = "visible"
image2.filters[0].play()
}
onFilterChange Event Handler
