Question

是否可以将div附加到图像？如在，使div跟随图像？我有一个网络应用程序，用户可以点击页面的一部分，图像移动到缓动区。我想要一个讲话泡泡来跟随图像并保持在它上面，但我却无法找到它所需要的东西。

感谢任何指导！

此致

Answer 1

当我这样做时，我会制作一个包含你的图像和讲话泡泡的div的Div。

<div class="topelement">
  <img src="#" />
  <div class="speechbubble"></div>
</div>

然后，当用户点击页面的某个部分时，您可以使用de class＆＃34; topelement＆＃34;移动div。

希望这会有所帮助

Answer 2

如果这是用户需要点击的元素：

 <div id="showImage">
    Show the image
  </div>

用户点击后，将显示以下滑块

<div class="divSlider">
  <img src="http://images6.fanpop.com/image/photos/33100000/justin-bieber-2013-justin-bieber-33194067-1295-1500.jpg"  />
  <div class="speechbubble">Your bubble message here!</div>
</div>

CSS：

.speechbubble {
  background-image: url("http://www.clker.com/cliparts/K/k/N/x/a/k/dialog-bubble-rectangle-md.png");
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100;
  right: 0px;
  position: absolute;
  padding: 20px 30px;
  color: red;
}
.divSlider {
  width: 350px;
  height: 300px;
  position: relative;
  display: none;
}
img {
  float: left;
  width: 300px;
}

默认情况下隐藏CSS本身的div。

现在jQuery：

$(function() {
  $("#showImage").click(function(){
      $(".divSlider").fadeIn(2000);  
  });
});

Working Demo

将div附加到图像

2 个答案: