jQuery 如何使用jquery放大和缩小图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2207508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to zoom in and zoom out image using jquery?
提问by Param-Ganak
I have following code
我有以下代码
<div class="c1">
<div class="d1">
<img />
<img />
<img />
</div>
</div>
1.There are GIF images included in tag. These images are transparent and some portion of them are highlighted with transparent yellow patch. 2. css class is applied to inner div class and there is a background image of type jpeg is assigned to inner div class with the help of css class. 3. The outside div is made scrollable with the help of css class applied to it.
1.标签中包含GIF图片。这些图像是透明的，其中的某些部分用透明的黄色补丁突出显示。2. css 类应用于内部 div 类，并且在 css 类的帮助下，将 jpeg 类型的背景图像分配给内部 div 类。3. 外部 div 在应用 css 类的帮助下可滚动。
I want to do zoom in and out on the image image inside div with the help of jquery.
我想在 jquery 的帮助下放大和缩小 div 内的图像图像。
so is it possible to zoom in and out the image with the help of jquery? what is the simple code for it?
那么可以在jquery的帮助下放大和缩小图像吗？它的简单代码是什么？
waiting for your replies friends!
等待各位朋友的回复！
Thank You!
谢谢你！
回答by はると
Backgrounds cannot be scaled, only <img>tags can.
背景不能缩放，只有<img>标签可以。
You could put an image in a div, where the div has overflow:hidden;, and then scale the image.
您可以将图像放在div 中，其中 div 具有overflow:hidden;，然后缩放图像。
You can see an quick example here: http://jsbin.com/ozugi3/2
你可以在这里看到一个简单的例子：http: //jsbin.com/ozugi3/2
回答by SHAURAJ SINGH
****here is the script****
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100);
});
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100);
});
});
</script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">
