使用JavaScript 使标题在网页中弹出？

Question

我正在制作网页。代码可以在这里找到： https://jsfiddle.net/saTfR/43/

HTML:

<body>
    <img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
    alt="map">
</body>
    <div id="sidebar">
<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo"> 
</div>
</html>

CSS:

* {font-family: Lucida Console; }
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 230px;
  height: 100%;
  background-color: #CD6A51;
}

 </style>

我想在地图图像上方插入一些具有 "pop out" 效果的文本。我怎样才能做到这一点？

Answer 1

在您的地图图像之上。我假设您希望它出现在图像的 "center" 中，即使您向右滚动，您仍然希望它停留在那里。

您可以使用 fadeIn 方法轻松创建它 (jquery)

代码如下：

HTML:

<p class="text">asdfasdfaa</p>        
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>      


<div id="sidebar">
<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo"> 
</div>

CSS：（根据您的需要调整 css）

* {font-family: Lucida Console; }
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 230px;
  height: 100%;
  background-color: #CD6A51;
}
.text{

    color:white;
    z-index:999;
    position:fixed;
    left:60%;
    font-size:25px;

}

JS pop-up 您在评论中指定的效果：

  $(".text").hide().fadeIn(2000);

这也是您向下滚动后 header 文本消失的代码。当您向上滚动时，它会再次出现。

var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > pos)
    {
        $('.text').fadeOut();  
    }
    else
    {
        $('.text').fadeIn();
    }
    pos = mywindow.scrollTop();
 });

这里是 fiddle（更新）URL：https://jsfiddle.net/eugensunic/saTfR/48/

使用JavaScript 使标题在网页中弹出？

Using JavaScript to make title pop out in webpage?

javascript

webpage