이 기사의 예에서는 텍스트가 앞뒤로 표시되도록 하는 상태 표시줄 특수 효과 코드의 JS 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
텍스트가 앞뒤로 나타나는 상태 표시줄 효과를 실행할 때 페이지 왼쪽 하단의 상태 표시줄에 주의하세요. IE8 이상 버전에서는 효과를 볼 수 없는 것 같습니다. 그렇다면 어떻게 달성됩니까? 주로 메시지를 표시하는 기능을 사용하고, 위치 값에 따라 표시할 현재 문자열을 가져오고, 300밀리초 후에 디스플레이를 닫을 준비를 하고, 동시에 다음 디스플레이를 준비하기 위해 필요한 문자열 길이 카운터에 1을 추가합니다. 메시지를 숨기는 기능을 사용하여 메시지 오른쪽에 특정 길이의 문자열을 가져와 다음 문자를 공백으로 만드는 지연을 설정합니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/
구체적인 코드는 다음과 같습니다.
<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>이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
