JavaScript DHTML/GUI Components/Animation — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 07:44, 26 мая 2010
Содержание
- 1 Animate dynamic element h1 tag
- 2 Animation along a Circle
- 3 Animation along Straight Line
- 4 Animation based on DIV with color flash
- 5 Animation: eyes
- 6 Animation: fireworks
- 7 Animation: Lottery Number Picker and Statistics
- 8 Animation: mouse doodle
- 9 Animation on several images
- 10 Animation: pretty
- 11 Animation: Random Movement
- 12 Animation: snow
- 13 Animation: star
- 14 Animation: three eyes
- 15 Animation: trio
- 16 Animation: welcome message
- 17 Animation with JSTween
- 18 Animation: wriggly
- 19 Attack animation
- 20 Auto lotto dip
- 21 Big static eyes
- 22 Circle Animation
- 23 Dancing Text (IE)
- 24 Flash animation in Javascript
- 25 Flash animation in JavaScript: Changing style Properties
- 26 Following eyes
- 27 Framework for creating CSS-based animations
- 28 JavaScript Animation
- 29 JavaScript Ticker 1.2 (IE)
- 30 Link Hint Scroller 2.0 (IE)
- 31 Lotto number draw
- 32 Moving an Airplane Across a Web Page
- 33 Periodically Updating the Text Displayed by an HTML Element
- 34 Popup window animation (fly across screen)
- 35 Right to left animation
- 36 Snow animation
- 37 Spot light
- 38 Type Writer Effect 1.1 (IE)
- 39 Type Writer effect (IE)
- 40 Using the onFilterChange Event Handler
Animate dynamic element h1 tag
/*
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>
<!-- This is the dynamic element we will animate. We wrap the h1 tag in a -->
<!-- div because IE 4 won"t move the h1 without a div or a span container. -->
<div id="title" style="position:absolute"><h1>Hello</h1></div>
<!-- This is the JavaScript code that performs the animation -->
<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>
Animation along a Circle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
<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()">
<h1>Circular Animation</h1>
<hr />
<form>
<input type="button" value="Circle"
onclick="initCircAnime("block", 400, 200, 36, 20)">
</form>
<div id="block" style="position:absolute; top:200px; left:400px; height:200px; width:200px; background-color:orange"></div>
</body>
</html>
Animation along Straight Line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
<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()">
<h1>Straight-Line Animation</h1>
<hr />
<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>
<div id="block" style="position:absolute; top:200px; left:100px; height:200px; width:200px; background-color:orange"></div>
</body>
</html>
<!--
function animatePolygon(elemID) {
// prepare anime object for next leg
initAnime();
// create array of coordinate points
var coords = new Array()
coords[0] = [200, 200, 100, 400];
coords[1] = [100, 400, 300, 400];
coords[2] = [300, 400, 200, 200];
// pass next coordinate group in sequence based on anime.next value
if (anime.next < coords.length) {
initSLAnime(elemID, coords[anime.next][0], coords[anime.next][1],
coords[anime.next][2], coords[anime.next][3], 10);
// increment for next leg
anime.next++;
} else {
// reset "next" counter after all legs complete
anime.next = 0;
}
}
-->
Animation based on DIV with color flash
/*
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>
<!-- This div is the element we are animating -->
<div id="urgent"><h1>Red Alert!</h1>The Web server is under attack!</div>
<!-- This is the animation script for the element -->
<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>
Animation: eyes
/*
Paste this link to where you want the eyes to appear in your page.
MAKE SURE YOU *DO NOT* PLACE IT INSIDE ANY <DIV>.
<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>
<p>DON"T FORGET - DO NOT PUT INSIDE ANY OTHER DIV!</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 = "";
d.write("<div id="cont"+idx+"" class="eyestyle" style="height:34px;width:69px">"
+"<div id="eyblls"+idx+"" style="position:relative;width:69px;height:34px"><img src=""+e_img.src+"" alt=""/>"
+"<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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/staticeyes.zip">staticeyes.zip( 8 k)</a>
Animation: fireworks
//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">
<!--
body{
background-color : #000000;
}
//-->
</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("<div id="+(idx+i)+" style="position:absolute;top:0px;left:0px;"
+"height:1px;width:1px;font-size:1px;background-color:"+launchColour+""><\/div>");
}
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>
Animation: Lottery Number Picker and Statistics
/*
"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">
<!--
body {
background-color : black;
}
.containerdiv{
position : relative;
width : 520px;
background-color : black;
border : solid 1px yellow;
font-family : verdana, arial, sans-serif;
font-size : 11px ! important;
color : #fffff0;
padding : 5px;
text-align : center;
letter-spacing : 0px ! important;
}
.box1{
letter-spacing : 0px ! important;
text-align : center;
}
.box2 {
position : relative;
width : 340px;
height:195px;
padding : 0px;
text-align : center;
margin-left : auto;
margin-right : auto;
}
.box3 {
position : relative;
text-align:left;
padding-top :20px;
}
.whatitdo {
position : absolute;
top : 0px;
left : 0px;
width : 430px;
background-color : black;
padding : 10px;
font-family : verdana, arial, sans-serif;
font-size : 11px ! important;
color : #fffff0;
letter-spacing : 0px ! important;
text-align:left;
border : 1px solid yellow;
}
.oops {
color : #ffffff;
}
.hilite {
color : yellow;
}
.results {
position : relative;
}
.buttons {
width : 100px;
font-family : verdana, arial, sans-serif;
font-size : 11px ! important;
color : black;
background-color : white;
letter-spacing : 0px ! important;
}
a.kjg:link, a.kjg:visited, a.kjg:active{
color : #fffff0;
text-decoration : none;
}
a.kjg:hover{
color : yellow;
}
//-->
</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)?"<br/>\(<span class="oops">"+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:<br/><span class="hilite">"+draw_count+"<\/span> draws were generated.<br/><span class="hilite">"+ve+"<\/span> "+e1+", <span class="hilite">"+percentageTidy(b_ve)+"\%<\/span>, "+e2+" even.<br/><span class="hilite">"+vo+"<\/span> "+o1+", <span class="hilite">"+percentageTidy(b_vo)+"\%<\/span>, "+o2+" odd.";
document.getElementById("s1").innerHTML = "Best numbers: <span class="hilite">"+best_nums+"<\/span>"+v1;
document.getElementById("s2").innerHTML = "Best number: <span class="hilite">"+best_num+"<\/span>"+v2;
document.getElementById("s3").innerHTML = "Worst number: <span class="hilite">"+worst_num+"<\/span>"+v3;
document.getElementById("s4").innerHTML = other;
fnshd=true;
}
document.write("<div class="containerdiv" style="width:"+tabWidth+"px">"
+"<p class="box1">"
+"<p style="font-size:14px;margin-top:0px">Lottery Number Picker & Statistics<\/p>"
+"<p>For <span class="hilite">"+YourLotteryName+"<\/span> \(<span class="hilite">"+numbers+"<\/span> from <span class="hilite">1<\/span> to <span class="hilite">"+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>"
+"<div style="position:absolute;top:10px;left:10px;">"
+"<input type="button" id="xy" class="buttons" style="width:50px;color:red" value="Info!" onclick="seeInfo(1)">"
+"<\/div>"
+"<div class="box2" style="width:"+dispWidth+"px">"
+"<div style="position:absolute;top:0px;left:17px;width:50px;height:15px;text-align:left">Stats<\/div>");
for (i=0; i < range; i++){
c1++;
vy+=20;
if (c1 > 9){
vy=0;
vx+=70;
c1=0;
}
y[i]=vy;
x[i]=vx;
document.write("<div style="position:absolute;top:"+y[i]+"px;left:"+x[i]+"px;width:30px;height:15px;text-align:right">"+(i+1)+"- <\/div>"
+"<div id="nums"+i+"" style="position:absolute;top:"+y[i]+"px;left:"+(x[i]+31)+"px;width:40px;height:15px;text-align:left">0<\/div>");
box[i]=document.getElementById("nums"+i);
c3[i]=0;
c4[i]=0;
}
document.write("<\/div><div class="box3">"
+"<div id="s1" class="results" style="height:65px">Best numbers:<\/div>"
+"<div id="s2" class="results" style="height:30px">Best number:<\/div>"
+"<div id="s3" class="results" style="height:30px">Worst number:<\/div>"
+"<div id="s4" class="results" style="height:55px">Other:<\/div>"
+"<\/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>
Animation: mouse doodle
//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">
<!--
body{
background-color : #000000;
}
//-->
</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{
if (d.body &&
typeof d.body.clientWidth == "number")
ref2 = d.body;
}
var idx = document.getElementsByTagName("div").length;
var pix = "px";
document.write("<div id="con"+idx+"" style="position:absolute;top:0px;left:0px;">"
+"<div style="position:relative">");
for (i = 0; i < n; i++){
document.write("<div id="lights"+(idx+i)+"" style="position:absolute;"
+"top:0px;left:0px;height:50px;width:50px;font-family:Courier New;"
+"font-size:10px;color:#ffffff;padding-top:18px;text-align:center">.<\/div>");
}
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++){
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;
}
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>
Animation on several images
/*
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
*/
<!-- The image that will be animated. Give it a name for convenience. -->
<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++) {
aniframes[i] = new Image(); // Create an off-screen image
aniframes[i].src = "images/" + i + ".gif"; // Tell it what URL to load.
}
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() {
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.
}
</script>
<form> <!-- This form contains buttons to control the animation. -->
<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;">
</form>
Animation: pretty
//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++){
document.write("<div id="dvs"+(idx+i)+"" style="position:absolute;top:0px;left:0px;"
+"width:1px;height:1px;background-color:"+colours[0]+";font-size:1px"><\/div>");
}
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){
followMouseSpeed = 0.1;
}
if (domWw) ref = window;
else{
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;
}
}
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){
scy = ref.pageYOffset;
scx = ref.pageXOffset;
}
else{
scy = ref.scrollTop;
scx = ref.scrollLeft;
}
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == "number"){
y = e.pageY - msy;
x = e.pageX;
}
else{
y = e.clientY - msy;
x = e.clientX;
}
}
function colourStep(){
counter1 += step2;
if (counter1 >= numberOfDots+idx){
counter1 = idx;
counter2 += step2;
}
if (counter2 == colours.length){
counter2 = 0;
}
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){
ry = h-buff;
}
if (ry <= buff){
ry = buff;
}
if (rx >= w-buff){
rx = w-buff;
}
if (rx <= buff){
rx = buff;
}
if (counter3 > colourChangeSpeed){
colourStep();
counter3 = 0;
}
for (i = 0; i < numberOfDots; i++){
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;
}
setTimeout(DoItAll,setTimeOutSpeed);
}
function init(){
for (i = 0; i < numberOfDots; i++){
the_dots[i] = document.getElementById("dvs"+(idx+i)).style;
}
winSize();
DoItAll();
}
if (window.addEventListener){
window.addEventListener("resize",winSize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winSize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}//End.
</script>
</body>
</html>
Animation: Random Movement
//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">
<!--
body{
background-color : #000000;
}
//-->
</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++;
var stuff = "<div id="pic"+idx+"" style="position:absolute;"
+"top:2px;left:2px;height:"+imgh+"px;width:"+imgw+"px;"
+"overflow:hidden"><img src=""+rm_img.src+"" alt=""/><\/div>";
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{
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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 - imgh;
w = rw - imgw;
}
else{
h = r.clientHeight - imgh;
w = r.clientWidth - imgw;
}
}
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 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){
newpath();
c1=0;
}
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){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//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>
Animation: snow
//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">
<!--
body{
background : #000000;
}
//-->
</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);
document.write("<div id="flake"+(idx+i)+"" style="position:absolute;top:0px;left:0px;width:"
+sfs[i]+"px;height:"+sfs[i]+"px;background-color:#ffffff;font-size:"+sfs[i]+"px"><\/div>");
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{
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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 - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}
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 snow(){
var dy,dx;
for (i = 0; i < num; i++){
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];
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
</body>
</html>
Animation: star
/*
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++){
document.write("<div id="stars"+(idx+i)+"""
+" style="position:absolute;top:0px;left:0px;"
+"width:1px;height:1px;background-color:#ffffff;"
+"font-size:0px;"><\/div>");
}
if (domWw) ref = window;
else{
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;
}
}
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]){
rst(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++){
strs[i] = document.getElementById("stars"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
</body>
</html>
Animation: three eyes
/*
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 for original "staticeyes.js"....if needed....
The new style for "staticeyes1.js"
.eyestyle1{
padding-left : 0px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 0px;
float : left;
}
etc.........
//-->
</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">
<!--
.tablestyle{
width : 370px;
text-align : center;
margin-left : auto;
margin-right : auto;
font-family : verdana, arial, sans-serif;
font-size : 11px;
color : #888888;
border : dotted 1px #888888;
}
.eyestyle{
/*Optional*/
text-align : center;
margin-left : auto;
margin-right : auto;
}
.eyestyle1{
/*Optional*/
padding-left : 0px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 0px;
float : left;
}
.eyestyle2{
/*Optional*/
padding-left : 0px;
padding-top : 10px;
padding-right : 0px;
padding-bottom : 0px;
float : right;
}
//-->
</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 = "";
d.write("<div id="cont"+idx+"" class="eyestyle" style="height:34px;width:69px">"
+"<div id="eyblls"+idx+"" style="position:relative;width:69px;height:34px"><img src=""+e_img.src+"" alt=""/>"
+"<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",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//End.
</script>
</p>
<table class="tablestyle">
<tr>
<td style="text-align:center;font-weight:bold;color:red">
Important!<br/>Will not work correctly if placed inside any div!
</td>
</tr>
<tr>
<td style="text-align:left">
<p style="text-align:center">Works OK in the normal HTML flow, tables, and <p>"s etc.</p>
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 = "";
d.write("<div id="cont"+idx+"" class="eyestyle1" style="height:34px;width:69px">"
+"<div id="eyblls"+idx+"" style="position:relative;width:69px;height:34px"><img src=""+e_img.src+"" alt=""/>"
+"<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",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//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 = "";
d.write("<div id="cont"+idx+"" class="eyestyle2" style="height:34px;width:69px">"
+"<div id="eyblls"+idx+"" style="position:relative;width:69px;height:34px"><img src=""+e_img.src+"" alt=""/>"
+"<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",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//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>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/AnimationMoreEyes.zip">AnimationMoreEyes.zip( 5 k)</a>
Animation: trio
//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;
d.write("<div id="x"+(idx+i)+"" style="position:absolute;"
+"top:0px;left:0px;width:"+dims+"px;height:"+dims+"px;"
+"background-color:"+xCol+";font-size:"+dims+"px"><\/div>"
+"<div id="y"+(idx+i)+"" style="position:absolute;top:0px;"
+"left:0px;width:"+dims+"px;height:"+dims+"px;"
+"background-color:"+yCol+";font-size:"+dims+"px"><\/div>"
+"<div id="z"+(idx+i)+"" style="position:absolute;top:0px;"
+"left:0px;width:"+dims+"px;height:"+dims+"px;"
+"background-color:"+zCol+";font-size:"+dims+"px"><\/div>");
}
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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;
}
}
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 mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == "number"){
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn(){
for (j = 0; j < 3; j++){
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;
}
stp+=s;
for (i = 0; i < n; i++){
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];
}
}
setTimeout(assgn,t);
}
function init(){
for (i = 0; i < n; i++){
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
})();
}//End.
</script>
</body>
</html>
Animation: welcome message
//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;
d.write("<div id="_box"+idx+"" style="position:absolute;top:0px;left:0px;"
+"height:10px;width:10px;text-align:center;overflow:"+ovrflw+"">"
+"<div id="_txt"+idx+"" style="position:absolute;top:0px;left:0px;width:1px;"
+"height:1px;font-family:arial,sans-serif;font-size:1px">.<\/div><\/div>");
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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;
}
y = Math.floor(h/2);
x = Math.floor(w/2);
xy = (w >= h)?w:h;
}
function scrl(yx){
var sy,sx;
if (domSy){
sy = r.pageYOffset;
sx = r.pageXOffset;
}
else{
sy = r.scrollTop;
sx = r.scrollLeft;
}
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){
currentStep = 10;
step = 8;
msgPos += jog;
clrPos += jog;
}
if (clrPos >= col.length){
clrPos = 0;
}
timer = setTimeout(dsply,spd);
if (msgPos >= msg.length){
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);
}
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(){
winsize();
box = document.getElementById("_box"+idx).style;
txt = document.getElementById("_txt"+idx).style;
dims();
dsply();
}
function rsz(){
if (running){
winsize();
dims();
}
}
if (window.addEventListener){
window.addEventListener("resize",rsz,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",rsz);
window.attachEvent("onload",init);
}
})();
}
}//End.
</script>
</body>
</html>
Animation with JSTween
<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:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
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) {
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);
}
}
Tween = function(obj, prop, func, begin, finish, duration, suffixe){
this.init(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){
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();
}
}
t.getTime = function(){
return this._time;
}
t.setDuration = function(d){
this._duration = (d == null || d <= 0) ? 100000 : d;
}
t.getDuration = function(){
return this._duration;
}
t.setPosition = function(p){
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"});
}
t.getPosition = function(t){
if (t == undefined) t = this._time;
return this.func(t, this.begin, this.change, this._duration);
};
t.setFinish = function(f){
this.change = f - this.begin;
};
t.geFinish = function(){
return this.begin + this.change;
};
t.init = function(obj, prop, func, begin, finish, duration, suffixe){
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);
}
t.start = function(){
this.rewind();
this.startEnterFrame();
this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"});
//alert("in");
}
t.rewind = function(t){
this.stop();
this._time = (t == undefined) ? 0 : t;
this.fixTime();
this.update();
}
t.fforward = function(){
this._time = this._duration;
this.fixTime();
this.update();
}
t.update = function(){
this.setPosition(this.getPosition(this._time));
}
t.startEnterFrame = function(){
this.stopEnterFrame();
this.isPlaying = true;
this.onEnterFrame();
}
t.onEnterFrame = function(){
if(this.isPlaying) {
this.nextFrame();
setTimeout(Delegate.create(this, this.onEnterFrame), 0);
}
}
t.nextFrame = function(){
this.setTime((this.getTimer() - this._startTime) / 1000);
}
t.stop = function(){
this.stopEnterFrame();
this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"});
}
t.stopEnterFrame = function(){
this.isPlaying = false;
}
t.continueTo = function(finish, duration){
this.begin = this._pos;
this.setFinish(finish);
if (this._duration != undefined)
this.setDuration(duration);
this.start();
}
t.resume = function(){
this.fixTime();
this.startEnterFrame();
this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionResumed"});
}
t.yoyo = function (){
this.continueTo(this.begin,this._time);
}
t.addListener = function(o){
this.removeListener (o);
return this._listeners.push(o);
}
t.removeListener = function(o){
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
}
t.broadcastMessage = function(){
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);
}
}
t.fixTime = function(){
this._startTime = this.getTimer() - this._time * 1000;
}
t.getTimer = function(){
return new Date().getTime() - this._time;
}
Tween.backEaseIn = function(t,b,c,d,a,p){
if (s == undefined) var s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
Tween.backEaseOut = function(t,b,c,d,a,p){
if (s == undefined) var s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
Tween.backEaseInOut = function(t,b,c,d,a,p){
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;
}
Tween.elasticEaseIn = function(t,b,c,d,a,p){
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;
}
Tween.elasticEaseOut = function (t,b,c,d,a,p){
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);
}
Tween.elasticEaseInOut = function (t,b,c,d,a,p){
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;
}
Tween.bounceEaseOut = function(t,b,c,d){
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;
}
}
Tween.bounceEaseIn = function(t,b,c,d){
return c - Tween.bounceEaseOut (d-t, 0, c, d) + b;
}
Tween.bounceEaseInOut = function(t,b,c,d){
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;
}
Tween.strongEaseInOut = function(t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
Tween.regularEaseIn = function(t,b,c,d){
return c*(t/=d)*t + b;
}
Tween.regularEaseOut = function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
Tween.regularEaseInOut = function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
Tween.strongEaseIn = function(t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
Tween.strongEaseOut = function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
Tween.strongEaseInOut = function(t,b,c,d){
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;
}
</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:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
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){
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 o = TextTween.prototype;
o.targetObject = {};
o.targetProperty = {};
o.fromColor = "";
o.toColor = "";
o.currentColor = "";
o.onMotionChanged = function(evt){
var v = evt.target._pos;
this.targetObject[this.targetProperty] = this.txt.substr(0,v);
}
</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:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
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) {
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);
}
}
function Sequence(){
this.children = new Array();
this.currentChildIndex = 0;
this._listeners = new Array();
this.nextObject = new Object();
this.addListener(this);
}
var s = Sequence.prototype;
s.addChild = function(tween){
this.children.push(tween)
}
s.removeChild = function(tween){
var a = this.children;
var i = a.length;
while (i--) {
if (a[i] == tween) {
a.splice (i, 1);
return true;
}
}
return false;
}
s.start = function(){
this.rewind();
this.play();
this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"});
}
s.next = function(){
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"});
}
}
s.play = function(){
this.nextObject = new Object();
this.nextObject.onMotionFinished = Delegate.create(this, this.next);
this.children[this.currentChildIndex].addListener(this.nextObject);
this.children[this.currentChildIndex].start();
}
s.stop = function(){
this.children[this.currentChildIndex].stop();
this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"});
}
s.rewind = function(){
this.children[this.currentChildIndex].removeListener(this.nextObject);
this.currentChildIndex = 0;
for(var i = 0; i < this.children.length; i++){
this.children[i].rewind();
}
}
s.fforward = function(){
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;
}
s.resume = function(){
this.children[this.currentChildIndex].resume();
this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionStopped"});
}
s.addListener = function(o){
this.removeListener (o);
return this._listeners.push(o);
}
s.removeListener = function(o){
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
}
s.broadcastMessage = function(){
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);
}
}
</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:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
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) {
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);
}
}
function Parallel(){
this.children = new Array();
this.numChildren = 0;
this._listeners = new Array();
this.addListener(this);
}
var s = Parallel.prototype;
s.endObject = new Object();
s.addChild = function(tween){
this.children.push(tween)
this.numChildren++;
}
s.start = function(){
this.play();
this.broadcastMessage("onMotionStarted", {target:this, type:"onMotionStarted"});
}
s.play = function(){
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();
}
}
s.end = function(){
this.children[this.numChildren-1].removeListener(this.endObject);
this.broadcastMessage("onMotionFinished", {target:this, type:"onMotionFinished"});
}
s.stop = function(){
this.enumAction("stop");
this.broadcastMessage("onMotionStopped", {target:this, type:"onMotionStopped"});
}
s.rewind = function(){
this.enumAction("rewind");
}
s.fforward = function(){
this.enumAction("fforward");
}
s.resume = function(){
this.enumAction("resume");
this.broadcastMessage("onMotionResumed", {target:this, type:"onMotionResumed"});
}
s.yoyo = function(){
this.enumAction("yoyo");
}
s.enumAction = function(action){
for(var u = 0; u < this.numChildren; u++){
this.children[u][action]();
}
}
s.addListener = function(o){
this.removeListener (o);
return this._listeners.push(o);
}
s.removeListener = function(o){
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice (i, 1);
return true;
}
}
return false;
}
s.broadcastMessage = function(){
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);
}
}
</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:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
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){
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);
}
var o = ColorTween.prototype;
o.targetObject = {};
o.targetProperty = {};
o.fromColor = "";
o.toColor = "";
o.currentColor = "";
o.listenerObj = {};
o.onColorChanged = function(){
this.currentColor = this.getColor(this.fromColor,this.toColor,this._pos);
this.targetObject[this.targetProperty] = this.currentColor;
}
/***********************************************
*
* Function : getColor
*
* Parameters : start - the start color (in the form "RRGGBB" e.g. "FF00AC")
* end - the end color (in the form "RRGGBB" e.g. "FF00AC")
* percent - the percent (0-100) of the fade between start & end
*
* returns : color in the form "#RRGGBB" e.g. "#FA13CE"
*
* Description : This is a utility function. Given a start and end color and
* a percentage fade it returns a color in between the 2 colors
*
* Author : www.JavaScript-FX.ru
*
*************************************************/
o.getColor = function(start, end, percent)
{
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));
}
/*** 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(){
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);
}
</script>
<style>
h4{margin:0;padding:0;}
</style>
</head>
<body onload="init()">
<h1 id="LoremIpsum" style="display:none;">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.
</h1>
<div style="clear:both;padding-top:25px;">
<h4>Col 1</h4>
<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()">
<h4>Col 2</h4>
<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()">
<h4>Col 3</h4>
<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()">
<h4>Sequence</h4>
<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()">
<h4>Parallel</h4>
<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()">
</div>
<textarea id="debug" cols="30" rows="30">
</textarea>
<textarea id="debug2" cols="30" rows="30">
</textarea>
<textarea id="debug3" cols="30" rows="30">
</textarea>
<h3>Code</h3>
<pre>
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);
}
</pre>
</body>
<!-- Mirrored from www.powerping.be/js/jstween/TextTween_.html by HTTrack Website Copier/3.x [XR&CO"2007], Thu, 19 Jul 2007 20:06:58 GMT -->
</html>
Animation: wriggly
//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">
<!--
body{
background-color:#000000;
}
//-->
</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;
document.write("<div id="worm"+(idx+i)+"" style="position:absolute;top:0px;left:0px;width:"
+dims+"px;height:"+dims+"px;font-size:1px;border: 1px solid "+randcol+";overflow:hidden">.<\/div>");
}
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{
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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 - (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){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function followleader(){
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;
}
}
}
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){
newpath();
c1=0;
}
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++){
temp1[i] = document.getElementById("worm"+(idx+i)).style;
if (i < num-1)
temp2[i] = document.getElementById("worm"+(idx+(i+1))).style;
}
winsize();
var iniafter = Math.floor(500+Math.random()*2000);
setTimeout(animate,iniafter);
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
</body>
</html>
Attack animation
<html>
<head>
<title>DynAPI Examples - DynLayer Attack!</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
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");
</script>
<script language="Javascript">
var myTarget,w=0
dynapi.onLoad (function() {
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)
})
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Auto lotto dip
// 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>
<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;
}
else{
lotto();
}
}
function lotto(){
var rng = to-from;
var dum = "";
var e = (rng + 1);
var draw = new Array();
var number;
if (from >= to ){
alert("from value must be less than to value");
return false;
}
if ( (to+1)-from < pick){
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;
}
playing = true;
for (i=0; i < pick; i++){
number = parseInt(from + Math.random() * e);
for (j=0; j < pick; j){
if (number!=draw[j]){
j++;
}
else{
number = parseInt(from + Math.random() * e);
j = 0;
}
}
draw[i] = number;
}
draw.sort(numsort);
for (i=0; i < pick; i++){
disp = dum += (draw[i]+" ");
}
counter++;
document.getElementById("result"+idx).firstChild.data = disp;
timer = setTimeout(lotto,50);
if (counter > 50){
clearTimeout(timer);
playing=false;
counter=0;
}
}
var idx = document.getElementsByTagName("div").length;
//Alter the display style/looks here!
//Do not delete any commas etc!!
document.write("<div id="container"+idx+"" style=""
+"position:relative;"
+"width:160px;height:50px;"
+"font-family:verdana,arial,sans-serif;"
+"font-size:12px;"
+"color:#000000;"
+"background-color:#fffff0;"
+"text-align:center;"
+"border : 1px solid #000000">"
+"<input type="button" id="play"+idx+"""
+"value=""+buttonText+"" style="margin:5px">"
+"<div id="result"+idx+"" style=""
+"width:150px;"
+"font-family:verdana,arial,sans-serif;"
+"font-size:12px;"
+"color:#000000">"+initialText+"<\/div><\/div>");
var controlButton = document.getElementById("play"+idx);
if (window.addEventListener){
controlButton.addEventListener("click",justOnce,false);
}
else if (window.attachEvent){
controlButton.attachEvent("onclick",justOnce);
}
})();
}
</script>
</body>
</html>
Big static eyes
//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">
<!--
.eyestyle{
text-align : center;
margin-left : auto;
margin-right : auto;
}
//-->
</style>
</head>
<body>
<p>DON"T FORGET - DO NOT PUT INSIDE ANY OTHER DIV!</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</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 = "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 = "";
d.write("<div id="cont"+idx+"" class="eyestyle" style="height:102px;width:205px">"
+"<div id="eyblls"+idx+"" style="position:relative;width:205px;height:102px"><img src=""+e_img.src+"" alt=""/>"
+"<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;
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/bigstaticeyes.zip">bigstaticeyes.zip( 6 k)</a>
Circle Animation
<!-- ***********************************************************
Example 4-6
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<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() {
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;
}
}
// set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
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;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
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;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, 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 = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
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);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
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);
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
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);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
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);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
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);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
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;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
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;
}
</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) {
// "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);
}
// Move element along an arc that is 1/36 of a circle; stop at full circle
function goAround(layerName) {
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);
}
}
</script>
</head>
<body onLoad="initDHTMLAPI(); startRoll("banner")" >
<span id="banner" style="position:absolute; visibility:hidden; left:0; top:0;
background-color:yellow; font-size:36pt; color:red">
Congratulations!
</span>
</body>
</html>
Dancing Text (IE)
<!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>
<!--BEGIN REQUIRED-->
<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;
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;
}
function dance()
{
for(var i=1; i<=text_dance_len; i++)
{
document.write("<div id="" + text_dance + i + "" style="position:absolute; visibility:hidden; left:" + (left_pos+15*i) + "">");
document.write("<font face="verdana,arial,helvetica" size="2" color="#003399"><b>" + text_dance.charAt(i-1) + "</b></font></div>");
}
dodance();
}
function dodance()
{
for(var i=1; i<=text_dance_len; i++)
{
Scroll(text_dance+i);
}
}
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
}
//DANCER
function Scroll(layerName){
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);
}
}
dance();
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Qiksearch Dancing Text</span>
<br>
<br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript that creates a dancing effect for a text like the one above.<br><br>
You can change the text by changing the variable <font face="courier">text_dance</font>.
The distance of the text from top can be changed by changing the variable <font face="courier">begin_pos</font> (Here it is 55). The distance of the text from the left can be changed by changing the variable <font face="courier">left_pos</font> (Here it is 125). The jump height can be changed by changing the variable <font face="courier">jump_height</font> (Here it is 3). You can also change the speed by changing the variable <font face="courier">time_length</font>.
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© Premshree Pillai</a></center>
</body>
</html>
Flash animation in Javascript
<!-- ***********************************************************
Example 5-10
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Changing className Properties</title>
<style type="text/css">
.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;
}
</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() {
classes = ["red", "green", "yellow", "blue"];
}
// Advance the color by one
function cycleColors() {
// 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);
}
}
</script>
</head>
<body onload="init(); cycleColors();">
<h1>Welcome to the <span class="red" id="hot1">Hot Zone</span> Web Site</h1>
<hr>
</body>
</html>
Flash animation in JavaScript: Changing style Properties
<!-- ***********************************************************
Example 5-9
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Changing style Properties</title>
<style type="text/css">
#hot1 {color:red}
</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() {
colors = ["red", "green", "yellow", "blue"];
}
// Advance the color by one
function cycleColors() {
// 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);
}
}
</script>
</head>
<body onload="init(); cycleColors();">
<h1>Welcome to the <span id="hot1">Hot Zone</span> Web Site</h1>
<hr>
</body>
</html>
Following eyes
//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">
<!--
body{
background:#ffffff;
}
//-->
</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{
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;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
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;
}
}
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 mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == "number"){
my = e.pageY - msy;
mx = e.pageX;
}
else{
my = e.clientY - msy;
mx = e.clientX;
}
}
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(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
makefollow();
setTimeout(move,30);
}
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){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}//End.
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/followingeyes.zip">followingeyes.zip( 3 k)</a>
Framework for creating CSS-based animations
/*
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>
/**
* 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"; }
* });
*
**/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
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
}
}
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"; }
});
</script>
</body>
<html>
JavaScript Animation
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Simple Animation</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function initialize() {
start=false
imageSource=new Array(5)
for(var i=0;i<5;++i){
imageSource[i]=new Image()
imageSource[i].src="image"+i+".gif"
}
delay=500
delta=100
nextImage=1
startAnimation()
}
function startAnimation() {
interval=setInterval("animate()",delay)
}
function setStart() {
start = true
}
function animate() {
if(start==true){
i=nextImage
++nextImage
nextImage%=5
if(imageSource[i].ruplete)
document.display.src=imageSource[i].src
}
}
function goFaster() {
clearInterval(interval)
delay-=delta
if(delay<100) delay=100
startAnimation()
}
function goSlower() {
clearInterval(interval)
delay+=delta
startAnimation()
}
// --></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript"><!--
initialize()
// --></SCRIPT>
<H1>Simple Animation</H1>
<IMG NAME="display" SRC="image0.gif" onLoad="setStart()">
<BR>
<FORM>
<INPUT TYPE="BUTTON" NAME="faster" VALUE="Faster" ONCLICK="goFaster()">
<INPUT TYPE="BUTTON" NAME="slower" VALUE="Slower" ONCLICK="goSlower()">
</FORM>
</BODY>
</HTML>
JavaScript Ticker 1.2 (IE)
<!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 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" );
var ticker_len = ticker_msg.length;
for(var l=0; l<ticker_len; l++)
{
document.write("<div id="" + div_name + l + "" style="position:absolute; visibility:hidden; top:" + top_pos + "; left:" + left_pos + "">" + "<table bgcolor="#000000" cellspacing="0" cellpadding="1" width="400"><tr><td><table width="100%" bgcolor="#EFEFEF"><tr><td><center><a href="" + ticker_url[l] + "" class="tick">" + ticker_msg[l] + "</center></a></td>");
document.write("</tr></table></td></tr></table>" + "</div>");
}
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
//SCROLL
function tick(){
if (NS4 || IE4) {
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);
}
}
tick();
</script>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">JavaScript Ticker 1.2</span>
</center>
<br><br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript Ticker which ticks a number of messages like the one shown above.
You can add more messages in the array <font face="courier">ticker_msg</font>. The URL for that
message should be added to the array <font face="courier">ticker_url</font>.
<br><br>Change the position of the ticker by changing the variables <font face="courier">top_pos</font> and <font face="courier">left_pos</font>. You can change the ticker speed by changing the value of the variable <font face="courier">time_length</font>. (Here it is 2000, which means that the ticker message will change every 2000 milliseconds, i.e every 2 seconds).
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© Premshree Pillai</a></center>
</body>
</html>
Link Hint Scroller 2.0 (IE)
<!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>
<!--BEGIN REQUIRED-->
<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;
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 (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
//SCROLL
function Scroll(layerName)
{
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);
}
}
}
//STOP SCROLLING
function StopScroll(layerName)
{
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);
}
}
function reset()
{
i=begin_pos;
j=i;
}
// HIDE HINT
function hideLayer(layerName)
{
if (NS4 || IE4)
{
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="hidden"");
}
}
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Link Hint Scroller 2.0</span>
<br>
<!--BEGIN REQUIRED-->
<a href="#" class="link" onmouseover="javascript:reset();Scroll("prem_hint");" onmouseout="javascript:StopScroll("prem_hint");">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">
<b>This is the hint or description for the above link!</b>
</div>
<!--END REQUIRED-->
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
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.
<br><br>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-->
<br><br>
<font face="courier">scroll_length</font> : Scroll length variable (150 here)<br>
<font face="courier">time_length</font> : 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)<br>
<font face="courier">begin_pos</font> : Beginning position of hint (300 here)
<br><br>
<b>New in Version 2.0</b><br>
In this version, you can change the direction of scrolling.<br>
<font face="courier">scroll_dir</font> : Direction of scrolling ("right" here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© Premshree Pillai</a></center>
</body>
</html>
Lotto number draw
/*
Paste this style sheet to the head of your page or add its contents to an existing sheet.
<style type="text/css">
<!--
a.kjg:link, a.kjg:visited, a.kjg:active{
color:#ffffff;
text-decoration:none;
}
a.kjg:hover{
color:#cf5600;
}
input{
font-family : verdana,helvetica,sans-serif;
font-size : 11px;
color : #000000;
}
.blntxt{
position : relative;
width : 500px;
background-color : #cf5600;
font-family : verdana,helvetica,sans-serif;
font-size : 11px;
color : #fffff0;
}
//-->
</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">
<!--
a.kjg:link, a.kjg:visited, a.kjg:active{
color:#ffffff;
text-decoration:none;
}
a.kjg:hover{
color:#cf5600;
}
input{
font-family : verdana,helvetica,sans-serif;
font-size : 11px;
color : #000000;
}
.blntxt{
position : relative;
width : 500px;
background-color : #cf5600;
font-family : verdana,helvetica,sans-serif;
font-size : 11px;
color : #fffff0;
}
//-->
</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){
bln.ply.focus();
alert("In progress:\nMust click reset to change numbers.\nReturning to game....");
bln.user.value = user_disp;
}
}
function mischief_2(){
if (playing){
alert("Already playing.....");
return false;
}
else{
usercheck();
}
}
function mischief_3(){
if (playing){
bln.ply.focus();
}
}
function usercheck(){
d1 = bln.user.value;
d1a = bln.user;
//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++;
}
}
d1 = d1.substring(c1,d1.length);
//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();
}
}//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);
for (j=0; j < 6; j){
if (r_nums != nums[j]) j++;
else{
r_nums = parseInt(1 + Math.random() * 49);
j=0;
}
}
nums[i]=r_nums;
}
nums.sort(numsort);
//Get bonus ball.
b_ball=Math.round(1+Math.random()*48);
for (j=0; j < 6; j){
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;
timer = setTimeout("lotto()",spd);
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++;
}
}
}
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>
Moving an Airplane Across a Web Page
/*
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() {
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
}
}
}
</script>
<body bgcolor="blue" onload="setInterval("fly()",100)">
<div name="heading" style="position:absolute;left:100;top:100;z-index:3">
<h1 style="color: rgb(255,255,0);">Welcome to the Aviation Home Page!</h1>
</div>
<div id="plane" style="position:absolute;left:0;top:400;z-index:2">
<img src="http://www.wbex.ru/style/logo.png">
</div>
<div id="cloud1" style="position:absolute;left:150;top:300;z-index:3">
<img src="cloud.gif">
</div>
<div id="cloud2" style="position:absolute;left:250;top:200;z-index:3">
<img src="cloud.gif">
</div>
<div id="cloud3" style="position:absolute;left:350;top:150;z-index:1">
<img src="cloud.gif">
</div>
<div id="cloud4" style="position:absolute;left:350;top:250;z-index:1">
<img src="cloud.gif">
</div>
</BODY>
</HTML>
Periodically Updating the Text Displayed by an HTML Element
/*
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(
"Notice anything different?",
"The text you are looking at has changed.",
"This is a handy way of sending messages to your users."
)
function scrollMessages(milliseconds) {
window.setInterval("displayMessage()", milliseconds)
}
function displayMessage() {
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
}
</script>
</head>
<body onload="scrollMessages(2000)">
<h1 align="center" id="scrollme">Watch this text very carefully!</h1>
</body>
</html>
Popup window animation (fly across screen)
/*
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.
var win = window.open("javascript:"<h1>BOUNCE!</h1>"", "",
"width=" + w + ",height=" + h);
// 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() {
// 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);
}
</script>
<!-- Clicking this button stops the animation! -->
<form>
<input type="button" value="Stop"
onclick="clearInterval(intervalID); win.close();">
</form>
</html>
Right to left animation
<!-- ***********************************************************
Example 4-5
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<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() {
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;
}
}
// set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
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;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
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;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, 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 = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
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);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
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);
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
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);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
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);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
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);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
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;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
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;
}
</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) {
// "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);
}
// Move the object to the left by 5 pixels until it"s centered
function glideToCenter(layerName) {
var obj = getRawObject(layerName);
shiftBy(obj,-5,0);
if (getObjectLeft(obj) <= stopPoint) {
clearTimeout(intervalID);
}
}
</script>
</head>
<body onLoad="initDHTMLAPI(); startGlide("banner")" >
<span id="banner" style="position:absolute; visibility:hidden; left:0; top:0;
background-color:yellow; font-size:36pt; color:red">
Congratulations!
</span>
</body>
</html>
Snow animation
<!-----------------------------------------------------------------------------------------
// XSnow für JavaScript - von Mag. Dr. Nikolaus Klepp - dr.klepp@gmx.at - www.klepp.info
//-----------------------------------------------------------------------------------------
jsSnow
Copyright (C) 2002 Mag. Dr. Nikolaus Klepp
Copyright (C) 2002 INOUE Hiroyuki <dombly@kc4.so-net.ne.jp>
Copyright (C) 2002 Heiko Feldker <hfeldker@web.de>
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.
------------------------------------------------------------------------------------------>
<HTML>
<HEAD>
<!-- THE SANTA & SNOW PROGRAM -->
<script>
//---------------------------------------------------------------------------------------
// XSnow for JavaScript - von Mag. Dr. Nikolaus Klepp - dr.klepp@gmx.at - www.klepp.info
//---------------------------------------------------------------------------------------
/* jsSnow
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.
*/
//---------------------------------------------------------------------------------------
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 ?
navigator.appVersion.split(";")[1].substr(6) :
navigator.appVersion));
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
// specified as the ratio to snow flakes
// exept 0, which means santa won"t be pushed by 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
// (between [0:360]; default is (1,0), 90 is to go up )
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++) {
flake_images[i] = new Image();
flake_images[i].src = flakeImageDir+"snow"+i+".gif";
}
var santa_image = new Image();
santa_image.src = santaImageDir+"sleigh"+santaSize+".gif";
//-------------------------------------------------------------------------
// calculates optimum framerate & corresponding speed
//-------------------------------------------------------------------------
function rebuild_speed_and_timer() {
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;
}
//-------------------------------------------------------------------------
// make flakes visible: while initalialisation phase flakes are invisble.
// after make_flakes_visible, all new flakes start visible
//-------------------------------------------------------------------------
function make_flake_visible_proc() {
window.clearInterval(flake_id);
flake_visible = true;
}
//-------------------------------------------------------------------------
// storm proc - turn storm on/off
//-------------------------------------------------------------------------
function storm_proc() {
// 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;
}
}
//-------------------------------------------------------------------------
// get the named layer
//-------------------------------------------------------------------------
function get_layer_by_name(id) {
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();
}
}
//-------------------------------------------------------------------------
// santa"s private movement
//-------------------------------------------------------------------------
function move_santa() {
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));
}
//-------------------------------------------------------------------------
// snowflake"s private movement
//-------------------------------------------------------------------------
function move_snow() {
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]);
}
}
//-------------------------------------------------------------------------
// move a layer
//-------------------------------------------------------------------------
function move_to(obj, x, y, visible) {
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;
}
}
//-------------------------------------------------------------------------
// initialize all objects & timer
//-------------------------------------------------------------------------
function start() {
var a = "";
// santa"s private layer
a += "<div id="santa0" "
+ "style="position: absolute; "
+ "left:-1px; top:-1px; z-index:0;">"
+ "<img src=""+santa_image.src+""></div>\n";
// each snowflake"s private layer
for (var i=0; i<flakes; i++) {
a += "<div id="flake"+i+"" "
+ "style="position: absolute; "
+ "left:-1px; top:-1px; z-index:0;">"
+ "<img src="" +flake_images[i % kFlakeImages].src+ ""></div>\n";
}
// 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 :-)
}
/* file-variable settings for Emacsen editors
Local Variables:
tab-width: 4
End:
*/
</script>
<style TITLE="Contemporary" TYPE="text/css">
body {
font-family: "Trebuchet Ms", Verdana, sans-serif;
font-weight: normal;
font-size: 10pt;
margin: 30px;
color: #c0c0c0;
background-color: #515170;
}
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; }
</style>
<title>jsSnow - XSnow for Webpages</title>
</HEAD>
<BODY BGCOLOR=#515170 COLOR=#ffffff vlink=#0000ff>
<!-- FRAMES PER SECOND DISPLAY -->
<div id=info style="position:absolute; left:3px; top:3px; color:#8080ff"></div>
<!-- THIS BUILDS THE SANTA & SNOW LAYER, PLUS A NAMED CONTAINER LAYER "santa_layer" -->
<SCRIPT>start();</SCRIPT>
<!-- REST OF PAGE -->
<DIV style="z-index:1;">
<h2>jsSnow 0.4</h2>
<h3>Hey, what"s this? Looks like XSnow!</h3><br>
<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!
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/jsSnow-0.4.zip">jsSnow-0.4.zip( 10 k)</a>
Spot light
/*
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">
<!--
body{
background-image : none ! important;
}
#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}
#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
z-index : 500;
}
//-->
</style>
Paste this js link IMMEDIATELY after the opening <body> tag.
<script type="text/javascript" src="spotlight_part_1.js"></script>
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>
Example:
<body>
<script type="text/javascript" src="spotlight_part_1.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">
<!--
body{
background-image : none ! important;
}
#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}
#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
z-index : 500;
}
//-->
</style>
</head>
<body>
<script type="text/javascript">
var noOpe = window.toString();
if (noOpe != "[object Object]"){
if ((document.getElementById) && window.addEventListener || window.attachEvent){
document.body.style.backgroundColor = "#000000";
document.write("<div id="content"><div id="light"><img src="spotlight.gif" alt="" onclick="reveal()"/><\/div>");
}
}
</script>
<script type="text/javascript">
//Spot Light http://www.btinternet.ru/~kurt.grigg/javascript
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;
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;
}
}
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){
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;
}
var con_h,con_w;
if (!window.opera && d.documentElement &&
typeof d.documentElement.scrollHeight == "number" &&
d.documentElement.scrollHeight != 0){
con_h = d.documentElement.scrollHeight;
con_w = d.documentElement.scrollWidth;
}
else{
if (d.body &&
typeof d.body.scrollHeight == "number"){
con_h = d.body.scrollHeight;
con_w = d.body.scrollWidth;
}
}
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 (needed){
document.addEventListener("mousemove",mouse,false);
}
else{
document.removeEventListener("mousemove",mouse,false);
}
}
if (window.attachEvent){
if (needed){
document.attachEvent("onmousemove",mouse);
}
else{
document.detachEvent("onmousemove",mouse);
}
}
}
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"){
y = e.pageY - spotLightImage.height/2;
x = e.pageX - spotLightImage.width/2;
}
else{
y = e.clientY - spotLightImage.height/2 + scy;
x = e.clientX - spotLightImage.width/2 + scx;
}
if (y >= (h+scy)-spotLightImage.height-5){
y = (h+scy)-spotLightImage.height-5;
}
if (x >= (w+scx)-spotLightImage.width){
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){
window.addEventListener("load",init,false);
window.addEventListener("resize",rld,false);
}
else if (window.attachEvent){
window.attachEvent("onload",function(){init();});
window.attachEvent("onresize",function(){rld();});
}
}//End.
}
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/spotlight.zip">spotlight.zip( 3 k)</a>
Type Writer Effect 1.1 (IE)
<!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>
<!--BEGIN REQUIRED-->
<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;
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="$"
function type()
{
for(var i=1; i<=text_type_len; i++)
{
document.write("<div id="" + text_type + i + "" style="position:absolute; visibility:hidden; top:" + begin_pos + "; left:" + (left_pos+15*i) + "">");
document.write("<font face="verdana,arial,helvetica" size="2" color="#003399"><b>" + text_type.charAt(i-1) + "</b></font></div>");
}
dotype();
}
document.write("<div id="" + cursor_var + "" style="position:absolute; visibility:hidden; top:" + begin_pos + ";">");
document.write("<font face="verdana,arial,helvetica" size="2" color="#FA5D00"><b>" + cursor_char + "</b></font></div>");
function dotype()
{
setTimeout("Show(""+text_type+i+"")",time_length);
}
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
}
//SHOW
function Show(layerName){
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();
}
}
}
function blink()
{
if(j%2==0)
{
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".visibility="visible"");
}
else
{
eval(layerRef+"[""+cursor_var+""]"+
styleSwitch+".visibility="hidden"");
}
if(j<2)
{
j++
}
else
{
j--
}
setTimeout("blink()",cursor_blink_speed);
}
type();
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Type Writer Effect 1.1</span>
<br>
<br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
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.<br><br>
You can change the text by changing the variable <font face="courier">text_type</font>.
The distance of the text from top can be changed by changing the variable <font face="courier">begin_pos</font> (Here it is 55). The distance of the text from the left can be changed by changing the variable <font face="courier">left_pos</font> (Here it is 110). You can also change the speed of typing by changing the variable <font face="courier">time_length</font>.
<br><br>After all the text is typed out the cursor blinks. The blink speed can be changed by changing the value of the variable <font face="courier">cursor_blink_speed</font> (Here it is 300). You can also change the cursor character by changing the variable <font face="courier">cursor_char</font> (Here it is $).
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© Premshree Pillai</a></center>
</body>
</html>
Type Writer effect (IE)
<!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>
<!--BEGIN REQUIRED-->
<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;
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;
function type()
{
for(var i=1; i<=text_type_len; i++)
{
document.write("<div id="" + text_type + i + "" style="position:absolute; visibility:hidden; top:" + begin_pos + "; left:" + (left_pos+15*i) + "">");
document.write("<font face="verdana,arial,helvetica" size="2" color="#003399"><b>" + text_type.charAt(i-1) + "</b></font></div>");
}
dotype();
}
function dotype()
{
setTimeout("Show(""+text_type+i+"")",time_length);
}
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="this.document.all";
styleSwitch=".style";
}
}
//SHOW
function Show(layerName){
if (NS4 || IE4) {
eval(layerRef+"[""+layerName+""]"+
styleSwitch+".visibility="visible"");
if(i<text_type_len)
{
i++;
dotype();
}
}
}
type();
</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Type Writer effect</span>
<br>
<br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript that creates a type writer effect for a text like the one above.<br><br>
You can change the text by changing the variable <font face="courier">text_type</font>.
The distance of the text from top can be changed by changing the variable <font face="courier">begin_pos</font> (Here it is 55). The distance of the text from the left can be changed by changing the variable <font face="courier">left_pos</font> (Here it is 110). You can also change the speed of typing by changing the variable <font face="courier">time_length</font>.
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">© Premshree Pillai</a></center>
</body>
</html>
Using the onFilterChange Event Handler
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>onFilterChange Event Handler</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function init() {
image1.filters[0].apply()
image2.filters[0].apply()
start()
}
function start() {
image1.style.visibility = "hidden"
image1.filters[0].play()
}
function finish() {
// verify that first transition is done (optional)
if (image1.filters[0].status == 0) {
image2.style.visibility = "visible"
image2.filters[0].play()
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>onFilterChange Event Handler</H1>
<HR>
<P>The completion of the first transition ("circle-in")
triggers the second ("circle-out").
<BUTTON onClick="location.reload()">Play It Again</BUTTON></P>
<DIV ID="image1" STYLE="visibility:visible;
position:absolute; top:150px; left:150px;
filter:progID:DXImageTransform.Microsoft.Iris(irisstyle="CIRCLE",
motion="in")"
onFilterChange="finish()"><IMG SRC="http://www.wbex.ru/style/logo.png" HEIGHT=90
WIDTH=120></DIV>
<DIV ID="image2" STYLE="visibility:hidden;
position:absolute; top:150px; left:150px;
filter:progID:DXImageTransform.Microsoft.Iris(irisstyle="CIRCLE",
motion="out")">
<IMG SRC="http://www.wbex.ru/style/logoRed.png" HEIGHT=90 WIDTH=120></DIV>
</BODY>
</HTML>