Question

我有一个段落，我想在该段落中的图像上显示一些文字，例如马，云朵等。问题是，当我在一个段落中的文字上显示图像，然后单词和线条上下移动时，我想当我单击用于显示图像的按钮时，段落行和文本应固定不上下移动。

<div class="member-detail-wrap" id="story_div"  ontouchstart="showImage()"  ontouchend="hideImage()">                                       

<div class="sqs-block-content">
 <p id="story">
   Charlie was so used to all his toys and various stuff, that he began to want something different. 
   One of his uncles found a fine <span class="horse"> horse </span> and he gave it to Charlie, as something unusual. 
   Charlie was very excited at having a <span class="horse2">horse </span>. He learned to ride, and was constantly on his horse, around the <span class='farm'> farm </span>.

   However, he treated the horse just as badly as he did all his other toys, 
   and it soon started looking neglected and sick. For the first time in his life Charlie became truly worried. 
   He loved the horse, and the fact that his family had offered to swap it for a new one meant nothing to him.
  </p>
 </div>
</div>

<script>
function showImage()
{
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
      $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
      $('.farm').html('<span class="farm"> farm </span>').fadeIn();

    $('.horse').html('<img src="stories/hourse.jpeg" width="55" height="53">');
      $('.horse2').html('<img src="stories/hourse.jpeg" width="60" height="53">');
      $('.farm').html('<img src="stories/farm.jpg" width="50">');
}
function hideImage()
{
    $('.horse').fadeOut(1500);
    $('.horse2').fadeOut(1500);
    $('.farm').fadeOut(1500);
  setTimeout(function(){
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
    $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
    $('.farm').html('<span class="farm"> farm </span>').fadeIn();
  },1500)

}
</script>

该段的屏幕截图。

Answer 1

纯CSS解决方案如何？

将图像添加为before伪元素，并将其居中放置在单词上方。默认情况下将它们设置为不可见，但在story_div处于活动状态时将其转换为可见视图。

Here is a jsfiddle，以防下面的代码段无效。

.pic {
  position: relative;
}

.pic:before {
  content: '';

  /* center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* scale */
  background-size: 50px;
  width: 50px;
  height: 50px;

  /* hide */
  visibility: hidden;
  opacity: 0;
  transition: visibility 1.5s ease, opacity 1.5s ease;
}

#story_div:active .pic:before {
  visibility: visible;
  opacity: 1;
}

.pic.horse:before {
  background-image: url('https://via.placeholder.com/50');
}

.pic.farm:before {
  background-image: url('https://via.placeholder.com/50');
}

<div id="story_div" class="member-detail-wrap">
  <div class="sqs-block-content">
    <p id="story">
      Charlie was so used to all his toys and various stuff, that he began to want something different.
      One of his uncles found a fine <span class="pic horse">horse</span> and he gave it to Charlie, as something unusual.
      Charlie was very excited at having a <span class="pic horse">horse</span>. He learned to ride, and was constantly on his horse, around the <span class='pic farm'>farm</span>.

      However, he treated the horse just as badly as he did all his other toys,
      and it soon started looking neglected and sick. For the first time in his life Charlie became truly worried.
      He loved the horse, and the fact that his family had offered to swap it for a new one meant nothing to him.
    </p>
  </div>
</div>

Answer 2

如果我正确理解了您的问题，则可以将图像放入添加到每个before和horse类的farm伪元素中。在下面的SCSS代码中，您将需要对图像的位置进行一些操作，但这应该可以解决问题。

.horse {
  position: relative;

  &.displayImage {
   &:before {
     content:url('stories/hourse.jpeg');
     width: 55px;
     height: 53px;
     position: absolute;
     top: -10px // or any other value that would move image above text line
   }
  }
 }

，并在下面对JS代码进行了少量更改。我用一个可以解决问题的功能替换了showImage和hideImage函数-拥有两个独立的函数毫无意义，一个负责添加类，另一个负责删除它们。

function toggleImage() {
   $('.horse, .horse2, .farm').toggleClass('displayImage');
}

当然，您也必须更改HTML：

<div class="member-detail-wrap" id="story_div"  ontouchstart="toggleImage()"  ontouchend="toggleImage()">

我希望能对您有所帮助，并且我正确理解了您的问题：）

我想在段落中显示图像，但是当我单击以显示图像时，文本就会上下移动

2 个答案: