This is just a little script to have cat paws walking across the page using jQuery.
I searched for something similar, but couldn’t find anything so this is what I ended up with…
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="catpaws.js"></script>
</head>
<body>
Put anything you like here, catpaws.js will append a couple of DIVs to the body tag when the page loads...
</body>
</html>
catpaws.js
/*!
* Cat Paws
* Requires, jQuery JavaScript Library v1.7.1
* http://jquery.com/
*
* Copyright 2012, Trevor Johnson, :-)
*
* Date: Mon March 12 2012
*/
// when the page loads, startPaws
$(document).ready(startPaws());
function startPaws() {
// append 2 hidden DIVs
var $newdiv1 = $('<div id="pawprint1" style="height: 85px; display: none;"><img src="paw.gif" alt="cat paw" /></div>');
var $newdiv2 = $('<div id="pawprint2" style="height: 85px; display: none;"><img src="paw.gif" alt="cat paw" /></div>');
$('body').append($newdiv1, $newdiv2);
// move the DIVs
movePaws(30);
}
function movePaws(count) {
// start positions
leftpos = 100;
toppos = 75;
n = 0;
var pawprint1 = document.getElementById("pawprint1");
var pawprint2 = document.getElementById("pawprint2");
pawprint1.style.position = "absolute";
pawprint1.style.left = 25 + "px";
pawprint1.style.top = 85 + "px";
pawprint2.style.position = "absolute";
moveit();
function moveit() {
n += 1;
if (n < 10) {
if (isEven(n)) {
pawprint1.style.display = "inherit";
pawprint1.style.left = ((parseInt(pawprint1.style.left) || 0) + leftpos) + "px";
pawprint1.style.top = ((parseInt(pawprint1.style.top) || 0) + toppos) + "px";
}
else {
pawprint2.style.display = "inherit";
pawprint2.style.left = ((parseInt(pawprint2.style.left) || 0) + leftpos) + "px";
pawprint2.style.top = ((parseInt(pawprint2.style.top) || 0) + toppos) + "px";
}
}
if (n >= 10 & n < 20) {
if (isEven(n)) {
pawprint1.style.left = ((parseInt(pawprint1.style.left) || 0) + leftpos) + "px";
pawprint1.style.top = ((parseInt(pawprint1.style.top) || 0) - toppos) + "px";
}
else {
pawprint2.style.left = ((parseInt(pawprint2.style.left) || 0) + leftpos) + "px";
pawprint2.style.top = ((parseInt(pawprint2.style.top) || 0) - toppos) + "px";
}
}
if (n >= 20) {
if (isEven(n)) {
pawprint1.style.display = "inherit";
pawprint1.style.left = ((parseInt(pawprint1.style.left) || 0) + leftpos) + "px";
pawprint1.style.top = ((parseInt(pawprint1.style.top) || 0) + toppos) + "px";
}
else {
pawprint2.style.display = "inherit";
pawprint2.style.left = ((parseInt(pawprint2.style.left) || 0) + leftpos) + "px";
pawprint2.style.top = ((parseInt(pawprint2.style.top) || 0) + toppos) + "px";
}
}
if (count-- > 0) {
setTimeout(moveit, 750);
}
else {
pawprint1.style.display = "none";
pawprint2.style.display = "none";
}
}
function isEven(value) {
if (value % 2 == 0)
return true;
else
return false;
}
}