이런 종류의 텍스트나 그림의 세로 스크롤 효과는 대형 웹사이트의 뉴스 공지나 친근한 링크에서 흔히 볼 수 있습니다. 다음은 텍스트의 세로 스크롤을 위한 자바스크립트 코드에 대한 소개입니다.
자바스크립트 코드는 다음과 같습니다.
<!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?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>
위 코드는 텍스트의 수직 스크롤 효과를 구현합니다. 텍스트가 간헐적으로 위아래로 스크롤될 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.