Zoom image using JQuery
Get more Free Download JQuery PDF Books
After mouse over image will be 400 pxs. After mouse out image will be 300 pxs.
Output:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function () {
$("#MyImage").width(200);
$('#MyImage').mouseover(function () {
$(this).animate({ width: "400" }, 'slow');
//$('#MyImage').animate({ marginLeft: "+=550px" }, 2000);
});
$('#MyImage').mouseout(function () {
//$('#MyImage').animate({ marginLeft: "-=550px" }, 2000);
$(this).animate({ width: "300" }, 'slow');
});
});
</script>
</head>
<body>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6OtLPDaMMy25sKRLdgPSvQNikc_I4cK2CqJoKJADth1l8_leQz3jh8R41jlmY8vbDJ8YihtWxzYiuU1Ex69QShsknm176vdEqNfCDv7Q2uhosXUg7ag58vB9Kq3NXDrNRJYwbVYDAlkq/s1600/Word(docx)+to+pdf+in+c%23+docx+file.JPG" id="MyImage"/>
</div>
</body>
</html>
Post a Comment
Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.