Javascript jquery 在单击图像时放大和缩小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11621377/
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
jquery zoom in and zoom out on clicking an image
提问by user1403848
I have an image which has to behave the following way: When a user clicks on it the first time it the image should zoom-in and when clicked on the image again it should zoom-out.
我有一个图像必须以下列方式运行：当用户第一次点击它时，图像应该放大，再次点击图像时它应该缩小。
Please help in figuring out how the two actions be performed by clicking on the image using jquery? Below is the code I have written for zooming in the image.
请帮助弄清楚如何通过使用 jquery 单击图像来执行这两个操作？下面是我为放大图像而编写的代码。
$('.tab1').click(function()
{
$(".GraphHolder").hide("slow");
$("#top-button-container").hide("slow");
$(".print").append('<button type="button">PRINT</button>');
$(this).animate({width: "70%"}, 'slow');
});
回答by sanusart
HTML:
HTML：
<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">
Jquery:
查询：
$(function(){
$('#pic').toggle(
function() { $(this).animate({width: "100%"}, 500)},
function() { $(this).animate({width: "50px"}, 500); }
);
});
Example at: http://jsfiddle.net/K9ASw/32/
回答by GreatTall1
Have you tried using toggleClass? You can use the optional [duration] parameter to specify how long you want the transition to take.
您是否尝试过使用toggleClass？您可以使用可选的 [duration] 参数来指定您希望过渡需要多长时间。
回答by adeneo
回答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">
回答by eteich
$(function () {
$('.tab1').on('click', function()
{
if($(this).hasClass('zoomed')) {
$(this).removeClass('zoomed')
$(this).children('img').animate({width: "10%"}, 'slow');
}
$(this).addClass('zoomed')
$(this).children('img').animate({width: "70%"}, 'slow');
}
});
});
I removed all the code not pertaining to the image resize. Also, if you're dealing with an image, you have to target the image tag, not the outer div. If the image is applied to the .tab1 class as a background image then you're sol.
我删除了所有与图像调整大小无关的代码。此外，如果您正在处理图像，则必须定位图像标签，而不是外部 div。如果该图像作为背景图像应用于 .tab1 类，那么您就大功告成了。
