Question

我一直对CSS sprites很糟糕。

我正试图弄乱jQuery plugin Spritely，但是我一直遇到麻烦，只是让精灵动画成功出现。

这是我的准系统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});
});

现在，我确保所有文件路径都正确，所以这不是问题。但是，我只是面对一个空白页面，没有动画。有什么想法吗？

谢谢！

Answer 1

似乎可以使用样式

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

这似乎也有效（从上面的网址下载）

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

在jQuery插件中使用CSS Sprites，Spritely？

1 个答案: