如何使用css和js来确保动态文本的缩放和向上滑动

How to ensure both scale and slide up can occur for dynamic text using css and js?

本文关键字：缩放 文本 动态 css 何使用 js 确保      更新时间：2023-09-26

请查找此CodePen: http://codepen.io/hellouniverse/pen/rrVddV

我有一个使用Ajax调用获得的示例图像和文本。我无法显示Ajax调用，因此在CodePen上我包含了一个模拟程序，它试图尽可能地进行类似操作。文本是在图像之后动态添加的。

当鼠标悬停时，我想确保图像上有缩放效果，并且文本也可以很好地向上滑动。现在，缩放类型的工作，而文本不滑动，但基本上跳到顶部!!

不管我喝多少杯咖啡，不管我咒骂IntelliJ多少次，我都不能让它工作。我一定是在什么地方犯了一个很小的错误，希望得到任何帮助。

基本上，我想在悬停上执行以下操作:
  • 鼠标悬停时文本向上滑动，鼠标移出时文本向下滑动
  • 图像在悬停时具有缩放效果(缩放比例为1.1)，在鼠标移出时具有缩小效果
  • 同样，div (block__Content)的宽度和高度不应该增加(但目前正在扩大，因为规模)。

 var $title = "MY Title";
 var $summary = "My Summary";
 var $ctaText = "A CTA TEXT";
 // Here is the mimic I described;
 // The data is actually obtained using an Ajax call (which I cannot replicate here):
 var $contentHover = "<div class='content-added contenthover'></div>";
 $('.myImage').after($contentHover); // Add the div that will be targeted for the hover
 var $contentHoverHeader = "<h2 class='contenthover__header'>" + $title + '</h2>';
 var $contentHoverContent = "<p class='contenthover__content'>" + $summary + '</p>';
 var $contentHoverLink = "<a class='contenthover__link' href='#'>" + $ctaText + '</a>';
 $('.contenthover').append($contentHoverHeader, $contentHoverContent, $contentHoverLink);
 $('.contenthover').hover(function() {
   $('.contenthover').css({
     display: 'inline-block',
     width: '100%',
     height: '278px',
     position: 'absolute',
     bottom: '0',
     transition: 'bottom 500ms ease-out'
   })
 });
.block__content {
  max-width: 1280;
  margin: 0 auto;
  display: inline-block;
}
.block__content {
  width: auto;
  height: 278px;
}
.contenthover {
  display: none;
}
.bgtile {
  background-repeat: no-repeat;
  &: hover, &: focus {
    cursor: pointer;
    height: 278px;
    transform: scale(1.1);
    transition: all 500ms ease-in-out;
  }
}
.node__content {
  span {
    display: none;
    // NO to the text } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block__content">
  <div class="content-tile">
    <article role="article" class="node sb-article bgtile" style="background-image: url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');">
      <div class="node__content">
        <span>DO NOT DISPLAY ME</span>
        <div class="myImage">
          <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="A large image" typeof="Image">
        </div>
      </div>
    </article>
  </div>
</div>

只要稍微改变一下你的CSS和jQuery就可以很容易地实现这一点。

这是更新后的Codepen

<<p>更新strong> SCSS : 
.block__content {
    max-width: 1280px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
}
.block__content {
    width: auto;
    height: 278px;
    overflow: hidden;
}
.contenthover {
    bottom: -278px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    transition: all 500ms ease-in-out;
}
.bgtile {
    background-repeat: no-repeat;
    cursor: pointer;
    height: 278px;
    img {
        transform: scale(1);
        transition: all 500ms ease-in-out;
    }
    &:hover img,
    &:focus img{
        transform: scale(1.1);
    }
}
jQuery

更新: 

$('.bgtile').mouseover(function() {
    $('.contenthover').css({
        bottom: '0'
    })
});
$('.bgtile').mouseout(function() {
    $('.contenthover').css({
        bottom: '-100%'
    })
});
相关文章：