Question

是否可以在jquery中为这张图片[2]制作这张图片[1]的动画？我想得到“越来越多的箭头效应”。我必须承认，经过一番搜索，我发现什么都没有，简单

$('#img').animate({width: '109px',height: '109px'});

对我来说效果不够。也许你们有一些线索或技巧可以达到那种效果。

[1] http://img543.imageshack.us/i/arrowmb.png/

[2] http://img687.imageshack.us/i/pngqa.png/

Answer 1

<强>已更新：现在尝试代码，它显示红色框中包含的绿色框中的箭头，红色框中的单击将增大和缩小箭头补偿运动。当然这些盒子仅用于显示目的，你可以从css中删除边框。

无论如何箭头都没有移动，效果是因为你提供的图像在箭头周围有一个空白区域，当然它也会增长。您可以剪裁图像以避免必须补偿移动，但无论如何，该示例说明其他属性也可以设置动画。

你只需要玩一些参数来获得你想要的效果。

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
</script>

<script>
$(document).ready(function() {
    $('.arrow_container').click(function() {
        $('img.arrow').animate({
          width: '+=70', height: '+=70', left: '-=15', top: '-=10'
        });
        $('img.arrow').animate({
          width: '-=70', height: '-=70', left: '+=15', top: '+=10'
        });
    });
});

</script>

<style>
.arrow_container {
    margin-left:30px; 
    margin-top:30px;
    width:100px; 
    height:100px;
    border: 1px solid red;
}

.arrow {
    position:absolute;
    width:30;
    height:30;
    border: 1px solid green;
}

</style>

</head>
<body>
    <div class="arrow_container">
        <img class="arrow"
        src="http://img687.imageshack.us/img687/9180/pngqa.png">
    </div>

</body>
</html>

在jquery中的箭头动画

1 个答案: