Heim  >  Artikel  >  Web-Frontend  >  Js erkennt die Fähigkeiten des Scrollens und des Verfärbens von Texteffekten

Js erkennt die Fähigkeiten des Scrollens und des Verfärbens von Texteffekten

WBOY
WBOYOriginal
2016-05-16 16:44:131938Durchsuche

Js implementiert den Texteffekt des Scrollens und Änderns der Farbe. Auf der Effektanzeigeseite können Sie sehen, dass der Text in abwechselnden Farben angezeigt wird. Der Effekt ist wirklich gut Text, den Sie möchten.

Das Folgende ist der Quellcode:

Kopieren Sie den Code Der Code lautet wie folgt:

< ;html>
Scrollen ändert die Farbe des Textes. <br></head> Achten Sie auf den Text unten, Teil Der Text ist rot gefärbt und die rote Farbe bewegt sich in einem Zyklus. <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">Originaltext</a> <br></div> ="text/javascript"> <br>var message="Willkommen bei Ke Leyi.com, wo es Web-Frontend und andere Lernmaterialien gibt." <br>var neonbasecolor="#333333" <br>var neontextcolor ="#ff0000" <br>var neontextcolor2 = "#ff3333" <br>var flashspeed=100 <br>var flashingletters=8 <br>var flashingletters2=2 <br>var flashpause=0 <br>var n=0 <br>if (document .all||document.getElementById){ <br>document.write('<font color="' neonbasecolor '">') <br>for (m=0;m<message. length;m ) <BR>document.write('<span id="neonlight' m '">' message.charAt(m) '</span>') <br>document.write('< /font>') <br>} <br>else <br>document.write(message) <br>function crossref(number){ <br>var crossobj=document.all? eval("document.all.neonlight" number) : document.getElementById ("neonlight" number) <br>return crossobj <br>} <br>function neon(){ <br>if (n==0){ <br>for (m=0;m< ;message.length;m ) <br>crossref(m).style.color=neonbasecolor <br>} <br>crossref(n).style.color=neontextcolor <br>if (n>flashingletters-1) crossref( n-flashingletters).style .color=neontextcolor2 <br>if (n>(flashingletters flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor <br>if (n<message.length-1 ) <BR>n <BR>else{ <BR>n=0 <BR>clearInterval(flashing) <BR>setTimeout("beginneon()",flashpause) <BR>return <BR>} <BR>} <BR>function beginneon(){ <BR>if (document.all||document.getElementById) <BR>flashing=setInterval("neon()",flashspeed) <BR>} <BR>beginneon() <BR>< /script> <br> <br><div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></ div> <br>< ;/body></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>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</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="jquery implementiert das Abrufen der Bildhöhe oder -breite nach dem Laden der Seite_jquery" href="https://m.php.cn/de/faq/12415.html">jquery implementiert das Abrufen der Bildhöhe oder -breite nach dem Laden der Seite_jquery</a></span><span>Nächster Artikel:<a class="dBlack" title="jquery implementiert das Abrufen der Bildhöhe oder -breite nach dem Laden der Seite_jquery" href="https://m.php.cn/de/faq/12419.html">jquery implementiert das Abrufen der Bildhöhe oder -breite nach dem Laden der Seite_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>