iBlog

Trevor Johnson
posts - 6 , comments - 12 , trackbacks - 0

My Links

News

Archives

Cats Paws - walking across the page - jQuery

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;
    }
}

Print | posted on Tuesday, March 13, 2012 9:09 AM |

Feedback

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
 

Powered by: