使用JavaScript在网页中弹出标题

Using JavaScript to make title pop out in webpage?

本文关键字：标题 网页 JavaScript 使用      更新时间：2023-09-26

我正在制作一个网页。代码可以在这里找到: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>

我想插入一些文本，将有一个"弹出"的效果在地图图像的顶部。我怎么能做到呢?

在您的地图图像的顶部。我假设你想让它在你的图像的"中心"，即使你向右滚动，你仍然希望它粘在那里。

您可以使用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您在注释中指定的弹出效果:

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

这也是你的标题文本消失一旦你向下滚动的代码。当你向上滚动时，它会再次出现。

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

，这里是小提琴(更新)URL: https://jsfiddle.net/eugensunic/saTfR/48/

相关文章：