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

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处于活动状态时将它们转换为视图。

如果下面的代码片段不起作用，这是一只小提琴就会出现故障。

​

.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和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()">                                       

我希望这有帮助，我正确地理解了你的问题:)