Question

我正在尝试为某些图像悬停时创建缩放功能，同时使用CSS3保持圆形图像效果。请参阅以下代码：

  $(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '99'});
      $(this).find('span').addClass('active');
      $(this).find('span').addClass("hover").stop().animate({ marginTop: '-24px', marginLeft: '-24px', top: '50%', left: '50%', width: '80px', height: '80px', WebkitBorderTopLeftRadius: 40, WebkitBorderTopRightRadius: 40, WebkitBorderBottomLeftRadius: 40, WebkitBorderBottomRightRadius: 40, MozBorderRadius: 40, BorderRadius: 40 }, 250); }
  }, function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '0'});
      $(this).find('span').removeClass('active');
      $(this).find('span').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '32px', height: '32px', WebkitBorderTopLeftRadius: 32, WebkitBorderTopRightRadius: 32, WebkitBorderBottomLeftRadius: 32, WebkitBorderBottomRightRadius: 32, MozBorderRadius: 32, BorderRadius: 32 }, 250); }
  });

HTML看起来像这样 -

<ul class="nodes">
  <li>
    <a href="/">
      <span style="background: url(image.jpg) no-repeat center center; width: 32px; height: 32px;">
        <img src="image.jpg" style="opacity: 0;" />
      </span>
    </a>
  </li>
</ul>

我无法工作的是动画时的MozBorderRadius（它没有保持一致的圆圈，WebkitRadius和BorderRadius似乎可以工作），以及保持图像居中动画。我想在动画制作时给图像一个MarginTop和marginLeft加上它的宽度和大小的一半，但它只是将它自己对齐到底部。

Answer 1

您不必设置webkit半径的所有角落，只需“WebkitBorderRadius”即可。

对于动画MozBorderRadius，您可以使用（“border-radius”：“40px”）。以下是您在webkit和moz上的代码：

$(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '99'});
        $(this).find('span').addClass('active');
        $(this).find('span').addClass("hover").stop().animate({ 
            marginTop: '-24px', 
            marginLeft: '-24px', 
            top: '50%', 
            left: '50%', 
            width: '80px', 
            height: '80px', 
            'border-radius' : '40px',
            WebkitBorderRadius: 40,
            BorderRadius: 40,
        }, 250);
    }
}, function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '0'});
        $(this).find('span').removeClass('active');
        $(this).find('span').removeClass("hover").stop().animate({ 
            marginTop: '0', 
            marginLeft: '0', 
            top: '0', 
            left: '0', 
            width: '32px', 
            height: '32px', 
            'border-radius' : '32px',
            WebkitBorderRadius: 32,
            MozBorderRadius: 32, 
            BorderRadius: 32
        }, 250); 
    }
});

使用CSS3和animate（）缩放圆形图像

1 个答案: