In
this article, I will explain how to zoom an image using jquery.
Description:
We have seen lot of websites like e-commerce using zoom effects
that can be used for a bigger view of parts of the image.
We can easily achieve zoom in and zoom out effect using jquery animate() method.
In the below code, let me tell the simple logic behind the
implementation for zoom effect on image.
On mouseover() event,
I’m calling animate() method where we are increasing the width and height of
the image.
On mouseout() event,
reset the width and height to normal.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#ImgZoom').mouseover
(function (e) {
$('#ImgZoom').animate({
width: "400px", height: "200px" }, 2000);
});
$('#ImgZoom').mouseout(function (e) {
$('#ImgZoom').animate({
width: "200px", height: "100px" }, 2000);
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<img id="ImgZoom" alt="Zoom Image" src="Images/ImageName.jpg" width="220px"
/>
</div>
<div
id="Test">
</div>
</form>
</body>
</html>
Image zoom with jquery ,
Jquery Image zoom, How to zoom images using Jquery, zooming images using
Jquery, Increase size of the images using Jquery, Increase image size using
Jquery, Jquery animate zoom images, zoom images on mouseover using Jquery
0 comments:
Post a Comment