在 jQuery 插件 Spritely 中使用 CSS Sprites？
我一直对 CSS sprites 很不满意。
我试图搞乱 jQuery 插件 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});
});
现在，我已经确保所有文件路径都是正确的，所以这不是问题。但是，我只是面对一个空白页面，没有动画。有什么想法吗？
谢谢！
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: 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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
似乎适用于 style
这似乎也适用（从上面的网址下载）
Seems to work with style
This also seems to work (downloaded from above url)