如何在不使用确切位置的情况下从中心缩放图像

Question

我有一张用html代码写的图片。

当鼠标在图像上时，我使用jquery对其进行缩放-但图像从左到上缩放，我希望它从中心缩放。

我在stackOverFlow中进行搜索，每个人都使用位置attr，但我没有使用它。

这是我的示例代码：

<div class="flex-col

let image = $('#navigation_bar img');

$('#menu-item-948').hover(function() {

  //   alert("top :"+position.top +" left : "+ position.left +" right: "+ position.right +" bottom: "+ position.bottom);
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-6.png")
    .animate({
        width: "5rem",
        height: "5rem",
        top: "0.5f",
        left: "0.5f"
      },
      50);
  $('#menu-item-948').append('<p id="text" >text</p>');
  $('#text').css('color', '#55EA00');

}, function() {
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png")
    .animate({
      width: "2.5rem",
      height: "2.5rem"
    }, 300);
  $('#text').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-col hide-for-medium flex-center" style="margin-left: 50%; margin-top: 10%">
  <ul id="navigation_bar" class="nav header-nav header-bottom-nav nav-center  nav-divided nav-uppercase text-center ">
    <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-page  menu-item-948">
      <a href="https://matiloos.dts.company/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a>
    </li>
  </ul>

导航栏中有很多这样的图片。

Answer 1

也许只能通过CSS来实现：

img {
  transition: transform .5s;
  transform: scale(.5);
}

img:hover, img:focus {
  transform: scale(.7);
}


/* just for styling */

div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  margin: 0;
  padding: 0;
}

<div>
  <img src="https://i.stack.imgur.com/8UkZF.png">
</div>

Answer 2

您可以在放大的同时调整top和left的位置。

-1rem看起来很合适。

let image = $('#navigation_bar img');

$('#menu-item-948').hover(function() {

  //   alert("top :"+position.top +" left : "+ position.left +" right: "+ position.right +" bottom: "+ position.bottom);
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-6.png")
    .animate({
        width: "5rem",
        height: "5rem",
        top: "-1rem",
        left: "-1rem"
      },
      150);
  $('#menu-item-948').append('<p id="text" >text</p>');
  $('#text').css('color', '#55EA00');

}, function() {
  $(image)
    .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png")
    .animate({
      width: "2.5rem",
      height: "2.5rem",
      top: 0,
      left: 0,
    }, 300);
  $('#text').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-col hide-for-medium flex-center" style="margin-left: 50%; margin-top: 10%">
  <ul id="navigation_bar" class="nav header-nav header-bottom-nav nav-center  nav-divided nav-uppercase text-center ">
    <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-page  menu-item-948">
      <a href="https://matiloos.dts.company/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a>
    </li>
  </ul>

Answer 3

那是因为您实际上并不是在缩放，而是在增加容器的高度。我会建议在CSS3中使用另一种方法；

class GradientChart: LineChartView {

private let accessQueue = DispatchQueue(label: "SynchronizedColor", qos: .userInteractive)
private var color: UIColor?

override func draw(_ rect: CGRect) {
    accessQueue.async {
        self.updateColors()

        DispatchQueue.main.async {
            super.draw(rect)
        }
    }
}

func updateColors() {
    if self.color != nil
        self.dataSet.setColor(self.color!)
        self.dataSet.fillColor = self.color!
        self.color = nil
    }
}

func setColor(_ color: UIColor) {
    accessQueue.async() {
        self.color = color
    }
}  

CSS：

let image = $('#navigation_bar img') ;

$(document).ready(function () {
    $('#menu-item-948').hover(function () {
        $(image).addClass('zoom-in');
    },function () {
        $(image).removeClass('zoom-in');
    });
});

Read about transform

Read about transition

Read about transform-origin