Watch some penguins on the livecam!
Solved
how to display a sprite animation on a web page via jquery
Posted on 2010-11-16
how does one display (see attached image) as an animation on a web page using jquery please
bot-explode.png
bot-explode.png
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
8 Comments
You may play with CSS and backgroundPosition-x
Test page :
Test page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
img.boom
{
width:23px;
height:28px;
background:url(bot-explode.png) 0 0;
}
</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script language="javascript">
setInterval("badaboum()",100);
var nbSprites = 7;
var widthSprite = 23;
function badaboum() {
var x = parseInt($(".boom").css("backgroundPosition-x").replace("px","")) + 23;
if( x >= nbSprites*widthSprite ) {
$(".boom").css("backgroundPosition-x", "0px");
}
else {
$(".boom").css("backgroundPosition-x", x+"px");
}
}
</script>
</head>
<body bgcolor="#BBBBBB">
<img class="boom" />
</body>
</html>
>how does one place it anyplace on the screen?
css :
position:absolute;
left:100px;
right:128px;
You can set multiple css attribute : $(".boom").css({"left":pos
where posX, posY and x are variable
thanks for the points!
css :
position:absolute;
left:100px;
right:128px;
You can set multiple css attribute : $(".boom").css({"left":pos
where posX, posY and x are variable
thanks for the points!
did i miss something as this does not work
thank you for the help
<script language="javascript">
setInterval("badaboum()",100);
var nbSprites = 7;
var widthSprite = 23;
var posX = 120;
var posY = 120;
function badaboum() {
var x = parseInt($(".boom").css("backgroundPosition-x").replace("px","")) + 23;
if( x >= nbSprites*widthSprite ) {
$(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x", "0px");
}
else {
$(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x", x+"px");
}
}
</script>
thank you for the help
if( x >= nbSprites*widthSprite ) {
$(".boom").css({"left":pos
}
else {
$(".boom").css({"left":pos
}
Featured Post
AWS EC2 is a core part of AWS’s cloud platform, allowing users to spin up virtual machines for a variety of tasks; however, EC2’s offerings can be overwhelming. Learn the basics with our new AWS cheat sheet – this time on EC2!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation.
Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month4 days, 19 hours left to enroll
670 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.