Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.
Course Of The Month
3 days, 11 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
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
Active 2 days ago
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>
Active 2 days ago
>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
Active 2 days ago
if( x >= nbSprites*widthSprite ) {
$(".boom").css({"left":pos
}
else {
$(".boom").css({"left":pos
}
Featured Post
Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles.
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…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month3 days, 11 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
630 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.