The Wheel of Blame!

The Wheel of Blame goes round and round, round and round, round and round. Wheeeeeeeeeeeeee!!

by Guillermo Toyloy

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="blame">The Wheel of Blame!</p>
<ul id="blam">
    <li><img src="http://www.gravatar.com/avatar/b4ae7f8b50a2c32287e456394570679e?s=24" alt="" /> It's Marc Gravell's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/b13dce689732844e6590da37048f0eaf?s=24" alt="" /> It's balpha's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/398eb5455ff290780d6164c830e6186b?s=24" alt="" /> It's Yi Jiang's fault!</li>
    <li><img src="http://sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="" /> It's The SO Dev Team's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=24" alt="" /> It's Jeff Atwood's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/70ad2c2830eb9a7753bd6312f3811e3e?s=24" alt="" /> It's Jin's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/2e1ea31243c478894a96971da3b49b55?s=24" alt="" /> It's The Server's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/c81f585328c241594864f888f1154025" alt="" /> It's badp's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/dd7e03fbbfcabd4675844173ec5390d2?s=24" alt="" /> It's Michael Mrozek's fault!</li>
    <li><img src="http://www.gravatar.com/avatar/bcd59f270d74920b57b404eb87d71ec5?s=24" alt="" /> It's Popular Demand's fault!</li>
    <li><span id="csharp">C#</span> It's C#'s fault!</li>
    <li><img src="http://www.gravatar.com/avatar/52b6e4f1831bcd153f645a14f29aa185?s=24" alt="" /> It's Nick Craver's fault</li>
    <li><img src="http://www.gravatar.com/avatar/3981cd271c302f5cba628c6b6d2b32ee?s=24&d=identicon" alt="" /> It's Tim Stone's fault</li>
    <li><img src="http://www.gravatar.com/avatar/ab5bc6f8580c0f7482732d512c5af9af?s=24" alt="" /> It's Josh's fault</li>
    <li><img src="http://www.gravatar.com/avatar/48a5b5169a8b4d6bc133c04cbc35347b?s=24" alt="" /> It's Shog9's fault</li>
</ul>

<br...

CSS

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

ul {
    float: left;
    margin-left: 20px;
    height: 24px;
    background-color: #efefef;
    padding: 10px 20px 10px 10px;
    
    overflow: hidden;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

ul li {
    font-size: 20px;
    margin-bottom: 30px;
}

ul li img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: bottom;
}

#csharp {
    display: inline-block;
    width: 24px;
    margin-right: 5px;
}

#blame {
    float: left;
    font-size: 12px;
    margin-top: 15px;
}

#spin {
    margin: -5px 0 0 15px;
    padding: 1px 3px 2px;
}

#sub {
    font-size: 11px;
    color: #ccc;
    clear: both;
    padding-top: 20px;
}

#sub a {
    color: #346C95;
}

#sub a:hover {
    color: #59B3EF;
}

#sub code {
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

JavaScript

var li = $('ul li'),
    spinBtn = $('#blam');

for (var i = 0; i < 3; i++) {
    li.clone().appendTo('ul');
}

function spin() {

    li.first().animate({
        marginTop: -(li.first().outerHeight(true) * (Math.floor(Math.random() * li.length * 2) + li.length * 2)) - 2
    }, 5000, 'easeOutQuad', function() {
    });
}

spinBtn.click(function() {
    li.first().css('margin-top', 0);
    spin();
    return false;
});
    spin();