Javascript JS中的图像放大缩小动画_Javascript_Html_Image_Shrink

Javascript JS中的图像放大缩小动画

javascript html image

Javascript JS中的图像放大缩小动画,javascript,html,image,shrink,Javascript,Html,Image,Shrink,好的，我正在放入一个onclick调整大小的图像（变大，然后onclick返回原始大小）我已经使用JS完成了这项工作，但我似乎无法将动画暗示在两个大小之间，我希望它明显变大，而不是扩展到大小，而不仅仅是在两个实例之间轻弹编码如下： <script type="text/javascript"> <!-- var flag = true; function resize() { if(flag) { document.getElementB

好的，我正在放入一个onclick调整大小的图像（变大，然后onclick返回原始大小）

我已经使用JS完成了这项工作，但我似乎无法将动画暗示在两个大小之间，我希望它明显变大，而不是扩展到大小，而不仅仅是在两个实例之间轻弹

编码如下：

      <script type="text/javascript">
<!--
var flag = true;
function resize() {
    if(flag) {
        document.getElementById("img1").style.width = "50px";
    } else {
        document.getElementById("img1").style.width = "280px";
    }
    (flag)?flag=false:flag=true;
} 
//-->
</script>

<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />

您可以使用CSS3转换来实现相同的效果。不需要javascript或jquery-

或者您可以使用jquery动画-

如果使用jquery

var flag = true;
$('#img1').click(function(e){
    if(flag)
        $(e.target).animate({width:'50px'}, 150, function(){
            //do stuff after animation
        });

    else
        $(e.target).animate({width:'280px'}, 150, function(){
            //do stuff after animation
        });
    flag=!flag;
});

我知道我会这么做，但它不适用于移动设备，悬停效果仍然存在。我希望能够通过单击而不是悬停来切换转换。干杯你可以试试jquery动画。使用起来非常简单。（见最新答案）