Resizing images to a reference point
I am trying to animate a slide show where the images zooms out.
Right now, I'm using:
$('#item').animate({width:"75%"},1000);
When I run this, the image resizes while keeping the top and left point of the image static. How can I resize the image while keeping top and right point static?开发者_运维知识库 (So the image will expand toward bottom and left)
Thank you!
Put it in a container and position it absolutely...
#item {
position: absolute;
top: 0;
right: 0;
}
jsFiddle.
Set a fixed width div the same size as the image originally, and set align="right".
E.g. assuming the image is 200x200: Also, resize the image, not the container, or make another container inside this one to resize.
<div style="width:200px;height:200px;">
<img src="img.jpg" align="right" />
</div>
resizing to the left is kinda tricky but not impossible. If you have a wrapping element and the image has float: right; it will be pretty easy as you can see in my example. If you don't have a wrapping element you should dynamically wrap one around it and make the image float to the right. Make sure the size of the wrapping element fits the width.
<html>
<head>
<title>Your Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<style type="text/css">
#outerbox {
width: 800px;
}
#box {
width: 100px;
height: 100px;
background: green;
float: right;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#box').click(function() {
$(this).animate({width: "75%"}, 1000);
});
});
</script>
</head >
<body>
<div id="outerbox">
<div id="box">
hello
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论