This is the part of HTML5 Animation. if you want to ZOOM IN and ZOOM OUT in some intervals continuously. then you can use HTML5 canvas. Listed below the code that will ZOOM IN and ZOOM OUT to any image which you want.
<!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>
<script src="js/jquery-2.1.1.js"></script>
</head>
<body onLoad="drawCanvas();">
<div>
<canvas
id="myCanvas" width="634" height="378">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
<script>
var surface; var happy; var x = 50; var y = 50; var scale =
0; var scaleDirection = 0.2;
function drawCanvas() {
surface =
document.getElementById("myCanvas");
if
(surface.getContext) {
happy = new
Image();
happy.onload =
loadingComplete;
happy.src =
"Voayger_voyageofdiscovery.jpg";
}
}
function loadingComplete(e) {
setInterval(loop,
125);
}
function loop() {
var surfaceContext
= surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Save the
current context
surfaceContext.save();
// Translate to
the center point of our image
surfaceContext.translate(x + happy.width * 0.5, y + happy.height * 0.5);
// Perform the
scale
surfaceContext.scale(scale, scale);
// Translate back
to the top left of our image
surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
// Finally we draw
the image
surfaceContext.drawImage(happy, 0, 0);
// And restore the
context ready for the next loop
surfaceContext.restore();
// Animate our
scale value
scale +=
scaleDirection;
if (scale < 0.2
|| scale > 2) {
scaleDirection
= -scaleDirection;
}
}
</script>
</body>
</html>
Posts
0 comments:
Post a Comment