个人中心
gpt4 book ai didi

JavaScript自动类型编写器功能

转载 作者：行者123 更新时间：2023-11-30 20:54:01 25 4
gpt4 key购买 nike

我为该网站创建的自动输入功能出现问题。一切都很好，但是当它完成我的单词数组时，它会将页面向上移动，然后当它再次开始时，它会将页面向下移动。我希望页面在完成单词数组以及开始单词数组时保持原位。

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);
}
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%
}
}
<!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>

最佳答案

我对您的 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自动类型编写器功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47859210/

25 4 0
文章推荐： c# - 如何强制 XmlSerializer 将元素序列化为已编译类型的属性？
文章推荐： c - C 中有很多错误， "redefinition"错误等等
文章推荐： c# - 如何使用 TcpListener 监听多个 IP？
文章推荐： c - 如何将汇编代码转换为 C 语言？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com