텍스트 입력 효과를 얻기 위해 자바스크립트를 사용한 특수 효과 예제 소개
- 伊谢尔伦원래의
- 2017-04-29 14:53:081757검색
이 장에서는 주로 웹서핑을 할 때 볼 수 있는 타이핑 효과를 소개합니다. 주로 onMousedown 이벤트와 event.button 속성을 사용하는 코드입니다.
• setTimeout 메소드가 실행되면 로딩 후 지정된 시간만큼 지연시킨 후 표현식을 한 번만 실행합니다.
• charAt 메소드는 지정된 인덱스 위치에 있는 문자값을 반환합니다. 문자열의 첫 번째 문자는 인덱스 0을 갖고, 두 번째 문자는 인덱스 1을 갖는 식입니다. 유효한 범위를 벗어난 인덱스 값은 빈 문자열을 반환합니다.
<html>
<head>
<title>打字效果的文字特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="Javascript">
var layers = document.layers;
var style = document.all;
var both = layers || style;
var idme = 908601;
if(layers) //如果不是ie浏览器
{
layerRef = 'document.layers';
styleRef = '';
}
if(style) //如果是ie浏览器
{
layerRef = 'document.all';
styleRef = '.style';
}
function writeOnText(obj, str) { //函数在页面上打印字符串
if(layers) {
with(document[obj]) {
document.open();
document.write(str); //write方法打印字符串
document.close();
}
}
if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串
}
var dispStr = new Array("phpcn"); //字符串数组
var overMe = 0;
function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果
{
var tmp0 = tmp1 = '', skip = 100;
if(both && idx <= str.length) {
if(str.charAt(idx) == '<') {
while(str.charAt(idx) != '>') idx++;
idx++;
}
if(str.charAt(idx) == '&' && str.charAt(idx+1) != '') {
while(str.charAt(idx) != ';') idx++;
idx++;
}
tmp0 = str.slice(0, idx);
tmp1 = str.charAt(idx++);
if(overMe==0 && plysnd==1) {
if(navigator.plugins[0]) {
if(navigator.plugins["LiveAudio"][0].type == "audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)", 100);
}
} else if(document.all) {
ding.Stop();
setTimeout("ding.Run()", 100);
}
overMe = 1;
} else {
overMe = 0;
}
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
//调用writeOnText函数将字符显示在网页上
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);
}
}
function init()
{
txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0); //调用txtTyper函数开始打字
}
</script>
</head>
<body onLoad="init();">
<center>
<h1>打字效果的文字特效</h1>
<hr />
<div class="ttll" id="tt10"></div>
</center>
</body>
</html>프로그램을 실행하면 페이지에 프롬프트 메시지가 나타나고 문자가 하나씩 나타납니다. 이런 식으로 문자가 하나씩 나타난 후 모든 인쇄가 완료될 때까지 기다려 인쇄를 중지하세요.
소스 프로그램 해석
(1) 프로그램은 나중에 쉽게 호출할 수 있도록 먼저 ID가 ttl0인 레이어를 생성합니다. 이 레이어는 인쇄된 텍스트를 표시하는 데 사용됩니다.
(2) 프로그램은 전체 페이지가 로드되면 onLoad 이벤트를 추가하고 이벤트를 처리하기 위해 init() 이벤트 처리 함수를 호출합니다.
(3) txtTyper() 함수에서 charAt 메서드를 사용하여 문자열의 특정 문자를 가져옵니다. if 조건문을 사용하여 문자가 끝에 도달하는지 확인합니다. 조건이 충족되면 페이지에 인쇄됩니다.
(4) if 문에서는 합법적인 Javascript 문을 사용하여 더 복잡한 작업을 완료할 수도 있습니다.
위 내용은 텍스트 입력 효과를 얻기 위해 자바스크립트를 사용한 특수 효과 예제 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!