Использование CSS Sprites в плагине jQuery, Sprite? - PullRequest
Новая
       4

Использование CSS Sprites в плагине jQuery, Sprite?

1 голос
/ 07 апреля 2011

Я всегда был ужасен с CSS-спрайтами.

Я пытаюсь просто возиться с плагином jQuery Sprittle , но у меня возникли некоторые проблемы с получением спрайтаанимация для успешного отображения.

Вот мои скелеты 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>

И мой стиль: 

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

И, наконец, jQuery: 

$(document).ready(function() {
    $('#mario').sprite({fps: 8, no_of_frames: 5});
});

Теперь я убедился, что все пути к моим файлам верны, так что это не проблема.Но я просто столкнулся с пустой страницей и без анимации.Есть идеи?

Спасибо!

1 Ответ

1 голос
/ 07 апреля 2011

Кажется, что работает со стилем 

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

Это также, кажется, работает (загруженный сверху URL) 

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