Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > js 上下文字滚动效果_文字特效

js 上下文字滚动效果_文字特效

WBOY

Freigeben： 2016-05-16 18:22:40

Original

1439 Leute haben es durchsucht

js实现的文字向上滚动效果，适合文字公告等。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>test</title> 
<style type="text/css"> 
#textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} 
</style> 
<script language="javascript" type="text/javascript"> 
function ScrollText(content){ 
this.Delay=10; 
this.Amount=1; 
this.Direction="up"; 
this.Timeout=1000; 
this.ScrollContent=this.gid(content); 
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML; 
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop"); 
this.ScrollContent.onmouseout = this.GetFunction(this,"Start"); 
}

ScrollText.prototype.gid=function(element){ 
return document.getElementById(element); 
} 
ScrollText.prototype.Stop=function(){ 
clearTimeout(this.AutoScrollTimer); 
clearTimeout(this.ScrollTimer); 
} 
ScrollText.prototype.Start=function(){ 
clearTimeout(this.AutoScrollTimer); 
this.AutoScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Timeout); 
}

ScrollText.prototype.AutoScroll=function(){ 
if(this.Direction=="up"){ 
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ 
this.ScrollContent.scrollTop=0; 
clearTimeout(this.AutoScrollTimer); 
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); 
return; 
} 
this.ScrollContent.scrollTop += this.Amount; 
}else 
{ 
if(parseInt(this.ScrollContent.scrollTop) <= 0) 
{ 
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; 
} 
this.ScrollContent.scrollTop -= this.Amount; 
} 
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) 
{ 
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Delay); 
} 
else 
{ 
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); 
} 
}

ScrollText.prototype.GetFunction=function(variable,method){ 
return function() 
{ 
variable[method](); 
} 
} 
</script>

<div id="textHeight" title="xx"> 
<a href="#"></a>
</div>

Verwandte Etiketten：

滚动

Quelle：php.cn

Vorheriger Artikel：javascript 数据类型转换(parseInt,parseFloat)_基础知识 Nächster Artikel：关于javascript DOM事件模型的两件事_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Aus URL-Parametern erhaltene PHP-Arrays verhalten sich nicht wie erwartet Ich habe einen URL-Parameter, der die Kategorie-ID enthält, und ich möchte ihn als Array w...

Aus 2024-04-06 22:09:02

0

1

1428

Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen Ich habe dem Körper Ränder gegeben. main {linker Rand: 200px; rechter Rand: 200px; Textaus...

Aus 2024-04-06 22:01:35

0

3

816

Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...

Aus 2024-04-06 21:58:04

0

1

800

Sudoku-Checker funktioniert nicht? Kann mir jemand helfen, den Fehler zu identifizieren? Ich habe alles im Online-Editor versucht, erhalte aber immer noch die Fehlermeldung. Aber ...

Aus 2024-04-06 21:21:07

0

1

474

MySQL: „Wählen Sie Text aus... als <Variable hier oder Unterabfrage>' Ich habe die folgende Tabelle mit den folgenden Daten: id Textsprache 1 Deutscher Text Deu...

Aus 2024-04-06 19:25:54

0

2

529

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage