Question

我尝试使用JavaScript将我的<header></header>设置为离开页面的位置（加载时），然后像移动横幅一样滑入页面位置。这是否有可能完成，如果是这样，我怎样才能实现这一效果。我只希望它完成一次，那就是加载/刷新页面的时候。任何帮助，将不胜感激！

HTML代码段：

    <!DOCTYPE html>
<html>
    <head>        
        <link rel= "stylesheet" href= "BoxModel3.css">
        <title>Indie-GO! Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>$(document).ready(function () {
    $("#fade").fadeIn(5000);
});</script>
    </head> 

    <body>        
        <div id="wrapper">
            <header>Home                
               <div id="fade">
                <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
                </div>
                <div class="img">
                    <img src="118_832586-W.jpg"/>
                </div>
            </header>

CSS片段：

header, nav, section, footer, #fade
{
    display: block;
}
*
{    
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html
{
    background-color: slategrey;

}

header
{
    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}

Answer 1

你需要这个吗？

$(document).ready(function () {
  //  $("#fade").hide(); // you must hide first
  //  $("#fade").fadeIn(3000); // and slow fade to show
  // or // but i like this :)
    $("#fade").hide();
    $('#fade').show('slide', {direction: 'left'}, 1000);
});

header, nav, section, footer, #fade
{
    display: block;
}
*
{    
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html
{
    background-color: slategrey;

}

header
{
    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}

<!DOCTYPE html>
<html>
    <head>        
        <link rel= "stylesheet" href= "BoxModel3.css">
        <title>Indie-GO! Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    </head> 

    <body>        
        <div id="wrapper">
            <header>Home                
               <div id="fade">
                <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
                </div>
                <div class="img">
                    <img src="118_832586-W.jpg"/>
                </div>
            </header>

Answer 2

试试这个:)

＆＃13;

$(document).ready(function() {
  //$("#fade").fadeIn(5000);
  var b = $("#fade").position();
  $("#fade").css("left", "-80%");
  $("#fade").animate({
    left: "+" + b.left
  }, 5000);
});

＆＃13;

header,
nav,
section,
footer,
#fade {
  display: block;
}
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
html {
  background-color: slategrey;
}
header {
  border: 25px solid indigo;
  font-family: Arial Black;
  font-size: 25px;
  padding 30px;
  background-color: indigo;
  text-shadow: 5px 4px 3px darkgrey;
  color: beige;
}
#fade {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
  <div id="wrapper">
    <header>Home
      <div id="fade">
        <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
      </div>
      <div class="img">
        <img src="http://www.bobsballoons.com/Photos/BalloonsInField.jpg" />
      </div>
    </header>
  </div>
</body>

＆＃13;

Answer 3

您要找的是wow.js

使用wow.js插件（点击here获取文档）
添加css String[][] strarray = new String[0][10]; try { mDbf = DocumentBuilderFactory.newInstance(); DocumentBuilder db = mDbf.newDocumentBuilder(); is.setCharacterStream(new StringReader(xml)); mDocument = db.parse(is); mDocument.getDocumentElement().normalize(); } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (SAXException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } NodeList nodeList = mDocument.getElementsByTagName("PictureList"); for (int i = 0; i < nodeList.getLength(); i++) { Node node = nodeList.item(i); if (node.getNodeType() == Node.ELEMENT_NODE) { Element element = (Element) node; strarray[0][i] = getValue("Id", element); strarray[0][i] = getValue("WorkId", element)); strarray[0][i] = getValue("PictureUrl", element)); strarray[0][i] = getValue("Status", element)); strarray[0][i] = getValue("CreatedDateTime", element)); } } public String getValue(String stag, Element mElement) { String value = ""; NodeList nlList = mElement.getElementsByTagName(stag).item(0) .getChildNodes(); Node nValue = (Node) nlList.item(0); if (nValue != null) { value = nValue.getTextContent(); } return value; }

添加脚本并激活脚本。

<link rel="stylesheet" href="css/animate.css">

`

添加课程<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>或您喜欢的任何内容

和。欢迎你;）

Answer 4

编辑CSS：

header
{
    position: relative; //make the position of the header relative
    left: -100%; // set left to -100%

    border: 25px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 30px;    
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige;
}

ADDED JS：

$(document).ready(function() {

    $("header").animate({"left": 0}, 3000) //3000 is the number of milliseconds for the slide in, which you can change.

})

如何动画我的标题在加载时从左侧水平滑动到页面视图？

4 个答案: