Using CSS Sprites in jQuery Plugin, Spritely?_问答_开发者

Using CSS Sprites in jQuery Plugin, Spritely?

开发者 https://www.devze.com 2023-02-22 11:44 出处：网络

I\'ve always been terrible with CSS sprites. I\'m attempting to just mess around with the jQuery plugin Spritely but I\'ve been having some trouble just getting a sprite animation to successfully app

I've always been terrible with CSS sprites.

I'm attempting to just mess around with the jQuery plugin Spritely but I've been having some trouble just getting a sprite animation to successfully appear.

Here is my barebones HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Mario</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="js/jquery.spritely-0.4.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="mario"></div>
    </div>
</body>
</html>

And my styling:

body {
    background: gray;
}

#wrapper {
    text-align: center;
    margin: 0px auto;
}

#mario {
    background: transparent url(images/sprites/sheets/mario_walk_right.png) 0 0 no-repeat;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1;
}

And finally, the jQuery:

$(document).ready(function() {
    $('#mario').sprite({fps: 开发者_JAVA技巧8, no_of_frames: 5});
});

Now, I've made sure all of my file paths are correct, so that isn't the problem. But, I'm just faced with a blank page, and no animation. Any ideas?

Thanks!

Seems to work with style

#mario {
        background: transparent url('http://www.spritely.net/images/hills-for-docs.jpg') 0 0 no-repeat;

This also seems to work (downloaded from above url)

#mario {
    background: transparent url('hills-for-docs.jpg') 0 0 no-repeat;

Using CSS Sprites in jQuery Plugin, Spritely?

精彩评论

关注公众号

热门标签

图文推荐

Using CSS Sprites in jQuery Plugin, Spritely?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：