Question

我遇到了为本网站创建的自动输入功能的问题。一切都很好但是当它通过我的一系列单词完成时它将页面向上移动然后当它再次启动时它会向下移动页面。我希望页面在完成单词数组以及启动单词数组时保持原位。

＆＃13;

var messages=["Your word is a lamp to my feet and a light to my path.","","Be still, and know that I am God! I will be exalted among the nations, I will be exalted in the earth!","Beauty for ashes"];
var rank=0;

// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);

// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);

function changeTxt(e){
  _h1 = this.getElementsByTagName("h1")[0];
  _h1.style.webkitAnimation = 'none'; // set element animation to none
   setTimeout(function() { // you surely want a delay before the next message appears
      _h1.innerHTML=messages[rank];
      var speed =2.8*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
      _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; //  switch to the original set of animation      
      (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
    }, 1000);
}

＆＃13;

body{
    margin: 0;
    padding: 0;
    background-color: purple;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/*-------------Header/Nav----------*/
header{
	width: 100%;
}
#start{
	width: 90%;
	margin: 0 auto;
  text-align: center;
}
#start h1{
	color: white;
    letter-spacing:6px;
	font-size: 3em;
	font-family: 'Anton', sans-serif;
}
nav ul{
	list-style-type: none;
	padding: 0;
	margin-left: 32%;
}
nav a{
    float: left;
	font-size: 1.2em;
	margin-right: 38px;
}
#wrapper{
    width: 100%;
    margin: 0 auto;
    background-color: Fuchsia;
    color:white;
}
#nav{
	width: 80%;
	margin: 0 auto;
}
a:nth-child{
	margin-right: 0;
}
/**************Type writer***********/
.myTypewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
   /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}
#wrapper-two{
  background: purple;
  color: #fff;
  font-family: monospace;
  padding-top: 3em;
  display: flex;
  justify-content: center;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: blue; }
}
/*--------------section two---------------*/
#wrapper-home{
	width: 90%;
	margin:0 auto;
	 display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
h2{
	float: left;
}
img{
	float: left;
}
/*----------------Media Queries-----------*/
@media only screen and (max-width: 1200px){
nav ul{
	margin-left: 20%
}
}

＆＃13;

<!DOCTYPE html>
<html>
<head>	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="otkcdim.css">
	<title>Home</title>
</head>
<body>
   <header>
	<div id="start">
		<h1>Only </h1>
	</div>
   </header>
	 <nav >
	 <div id="wrapper" class="cf">
	   <div id="nav" class="cf">
	 	<ul class="cf">
	 		<li><a>Home</a></li>
	 		<li><a>About Us</a></li>
	 		<li><a>Events</a></li>
	 		<li><a>Encouragement</a></li>
	 		<li><a>Contact Us</a></li>
	 	</ul>
       </div>
      </div>
	 </nav>
     <!--*****************Type Writer*************************-->
	 <section>
	 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	   <div id="wrapper-two">
	   <div class="myTypewriter" id="myTypewriter">
	 	<h1> Beauty for Ashes</h1>
	   </div>
	</div>
	 </section>
    <!--**********Home Page***************--> 
     <div id="wrapper-home">
     	<div class="yes">
        <img src="ma.jpg">
        <h2>Welcome.</h2>	
       </div>
     </div>
	 <script type="text/javascript" src="otkcdim.js"></script>
</body>
</html>

＆＃13;

Answer 1

我对你的CSS进行了一些小修改来解决这个问题。希望它有所帮助。

.myTypewriter h1 {
  overflow: hidden; 
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;

  // Set minimum height of auto-typewriter to hold it's place even when empty. 
  min-height: 25px;


   /* Adjust as needed */
  animation: 

  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}

JavaScript自动类型编写器功能

1 个答案: