javascript悬停图像并从左上到右下显示

javascript hover image and show left top to bottom right

本文关键字：显示 悬停 图像 javascript      更新时间：2023-09-26

当光标悬停在图像上时，我有一张40Px 40Px的图片，那么图像应该是100px 100px，但要缓慢地从左上到右下或从右上到左下打开。当我将光标移回图像的原始位置时，精确到40px 40px。提前感谢

您可以使用CSS转换：

img {
    width: 40px;
    height: 40px;
    transition: all 2s;
}
img:hover {
    width: 100px;
    height: 100px;
}

当然还有一个JSFiddle演示

您也可以在不使用CSS3而不是javascript的情况下完成此操作。

.image-placeholder {
    width: 40px;
    height: 40px;
    background: red;
    transition: height 2s, width 2s;
}
.image-placeholder:hover {
    width: 100px;
    height: 100px;
}
.images {
    list-style: none;
    padding: 0px;
}
.images li {
    display: inline-block;
    vertical-align: middle;
}
<div class="image-placeholder">
    <!-- You could also use the class on image tags -->
</div>
<!-- second example -->
<ul class="images">
    <li class="image-placeholder"></li>
    <li class="image-placeholder"></li>
    <li class="image-placeholder"></li>
</ul>

正如其他人所说，您可以只使用CSS3来实现这一点，但如果您希望"框"在悬停时保持不变，那么您也可以使用负裕度。

对于您的示例，从40个像素开始，扩展到100个像素。这会留下60个像素的差异，然后将其一分为二（盒子每侧各一半），这会给你30个像素的负边缘。

.wrap {
  position: relative;
}
.box {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: green;
  transition: all 0.5s;
}
.box:hover {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: -30px;
  background-color: blue;
}
<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

相关文章：