search

Home >Web Front-end >JS Tutorial >JS implements status bar special effects code for text to appear back and forth_javascript skills

JS implements status bar special effects code for text to appear back and forth_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:34:181307browse

The example in this article describes the JS implementation of the status bar special effects code for text to appear back and forth. Share it with everyone for your reference, the details are as follows:

When running this status bar effect where text appears back and forth, please pay attention to the status bar in the lower left corner of the page. It seems that the effect cannot be seen in IE8 and above versions. So how is it achieved? Mainly using functions to display messages, taking the current string to be displayed based on the value of place, preparing to close the display after 300 milliseconds, adding one to the required string length counter to prepare for the next display; at the same time, using functions to hide the message, Take a string of a certain length on the right side of Message and set the delay for blanking the next character.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/

The specific code is as follows: 

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 欢迎光临脚本之家，请多多提出你的建议!!! "; //这里可自定义显示内容
var place=1;
function scrollIn() { //这个函数用来显示消息
window.status=Message.substring(0, place); //根据place的值取当前需显示的字符串
if (place >= Message.length) { //如果全部信息已经显示完毕
place=1; //则将place重置
window.setTimeout("scrollOut()",300); //准备在300毫秒后收起显示
} else { //否则(信息还没有显示完)
place++; //将需取的字符串长度计数器加一
window.setTimeout("scrollIn()",50); //准备下一次显示
  } 
}
function scrollOut() { //这个函数用来消隐消息
window.status=Message.substring(place, Message.length); //取Message右边的一定长度的字符串
if (place >= Message.length) { //如果已经无字符可取(信息已经完全消隐)
place=1; //则初始化place
window.setTimeout("scrollIn()", 100); //设定下一次操作是显示信息
} else { //否则(信息还没有消隐完毕)
place++; //计数器加一
window.setTimeout("scrollOut()", 50); //设定消隐下一个字符的延时
  }
}
// End -->
</SCRIPT>
<title>来回出现文字的状态栏特效</title>
</head>
<body onLoad="scrollIn()">
<b>请注意页面左下角的状态栏</b>
</body>

I hope this article will be helpful to everyone in JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements the smooth scrolling effect code of the web page_jqueryNext article：jquery implements the smooth scrolling effect code of the web page_jquery

Related articles

See more