在JS中的图像放大收缩动画

Image Enlarge Shrink Animation In JS

本文关键字：动画 放大 图像 JS      更新时间：2023-09-26

我要放一张图片让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或jquerycss3动画/过渡/变换:如何使图像增长?

或者你可以使用jquery动画-http://forum.jquery.com/topic/image-resize-animation

如果使用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;
});
相关文章：