Using CSS Sprites in jQuery Plugin, Spritely?
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;
加载中,请稍侯......
精彩评论