suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Code für vertikales Scrollen von text_javascript-Fähigkeiten

JavaScript-Code für vertikales Scrollen von text_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:48:121384Durchsuche

Diese Art des vertikalen Scrolleffekts von Text oder Bildern wird häufig in großen Nachrichtenankündigungen und benutzerfreundlichen Links auf Websites beobachtet. Im Folgenden finden Sie eine Einführung in den Javascript-Code für das vertikale Scrollen von Text.

Der Javascript-Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style> 
a { 
 display:block; 
 font-size:15px; 
 line-height:18px; 
 text-decoration:none; 
 color:#333; 
 font-family:Arial; 
 font-size:12px; 
} 
.main{ 
 background:no-repeat 4px 5px; 
 border:1px solid #aaa; 
 width:400px; 
 padding:3px 2px 2px 20px; 
} 
#thediv{ 
 height:36px; 
 overflow:hidden; 
} 
</style>
<script type="text/javascript">
var c, _ = Function;
window.onload=function(){ 
 with (o = document.getElementById("thediv")){ 
 innerHTML += innerHTML; onmouseover = _("c=1"); onmouseout = _("c=0");
 } 
 (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18&#63;10:3000);".replace(/#/g,"o.scrollTop")))(); 
}
</script> 
</head> 
<body> 
<div class="main"> 
<div id="thediv"> 
 <a>蚂蚁部落欢迎您</a> 
 <a>只有奋斗才会有好的结果</a> 
 <a>高手都是从菜鸟成长而来</a> 
 <a>太阳马上就要出来了</a> 
 </div> 
</div> 
</body> 
</html>

Der obige Code erzielt den Effekt des vertikalen Scrollens des Textes. Freunde in Not können darauf verweisen.

Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung von CacheStorage in JavaScript_GrundkenntnisseNächster Artikel：Detaillierte Erläuterung der Verwendung von CacheStorage in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen