Question

我正在网站上工作，我想为图片按钮添加简单的动画效果。

在这种情况下，我需要按下按钮，当它变小时。

问题是图像按钮本身不是围绕其中心（我想要）调整大小，而是从图像的左上角调整大小。

这里有一个更好理解的链接： http://www.corioki.com/pulsante.php

如您所见，单击图像会调整按钮的大小，而不是围绕其中心。我该怎么做才能解决这个问题？

HTML code：

<html>
<head>
    <title>resizing</title>

    <link rel="stylesheet" type="text/css" href="pulsante.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

    <script>
        $(document).ready(function(){
            alert("jQuery is working!");
        });

        $(document).ready(function(){
            $("#myDiv").click(function(){
            $("#hicon").animate({height:'50%', width:'50%'});
            });
        });
    </script> 
</head>
<body>
    <h1>button</h1>
        <div id="myDiv">
            <a id="home" href="http://www.corioki.com/pulsante.php"><img id="hicon" src = "img/button_home_ita.png" /></a>
        </div>
</body>

感谢您的关注和最好的问候！

利玛

Answer 1

我认为你有两个选择。您可以使用Jquery：

在宽度/高度的同时为边距设置动画

DEMO

$("#myDiv").click(function(){
    $("#hicon").animate({height:'50%', width:'50%', 'margin-left':'25%','margin-top':'25%'});
});

或者您使用CSS3转换/转换：

DEMO

$("#myDiv").click(function(){
      $('#home').toggleClass('active');
});

a#home {
    transition: all 0.2s linear;
    display:block;
}

a#home img {
    width: 100%;
}

a#home.active {
    transform: scale(0.5);
}

Answer 2

我没有测试，但您可以考虑使用CSS3转换和转换。工作得更好，更快。它不会完美，但我认为这可能是一个很好的机会。添加了具有必要属性的类：

.animated{
  transition:All 1s ease;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transform: scale(0.5) ;
  -webkit-transform: scale(0.5) ;
  -moz-transform: scale(0.5) ;
  -o-transform: scale(0.5) ;
  -ms-transform: scale(0.5) ;
}

检查此示例

http://jsfiddle.net/EaBB3/

祝你好运

Jquery，如何在他的中心周围调整图像大小

2 个答案: