CSS與JavaScript的綜合應用---跑馬燈特效
阿新 • • 發佈：2018-12-30
前言：
Javascript中的跑馬燈是一種很吸引眼球的特效，通常是通過改變<input>來實現的。再配合上CSS，達到的效果非常完美。
首先：
按照傳統JavaScript的方法制作跑馬燈的效果，包括設定文字內容、跑動速度、以及相應的輸入框。
<html> <head> <title>跑馬燈</title> <script language="javascript"> var msg="這是跑馬燈，我跑啊跑啊跑"; //跑馬燈的文字 var interval = 400; //跑動的速度 var seq=0; function LenScroll() { document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg; seq++; if ( seq > msg.length ) seq = 0; window.setTimeout("LenScroll();", interval); } </script> </head> <body onLoad="LenScroll()"> <center> <form name="nextForm"> <input type="text" name="lenText"> </form> </center> </body>
此時基本的效果已經出來了，其中msq引數設定文字內容，interval設定文字的速度。
效果：
但此時的效果僅僅是輸入框中的文字在滾動，不是最終的效果。此時要對<body>及<input>標記加入相關的css屬性，頁面背景設定為黑色，將輸入框的背景設定為透明，邊框進行隱藏，再設定其他的文字屬性。
美化：
<style type="text/css"> <!-- body{ background-color:#000000; /* 頁面背景色 */ } input{ background:transparent; /* 輸入框背景透明 */ border:none; /* 無邊框 */ color:#ffb400; font-size:45px; font-weight:bold; font-family:黑體; } --> </style>
效果2:
總結：
通過css屬性對頁面和輸入框的美化，整個跑馬燈會顯得更加流暢，已經不再是文字在輸入框中滾動的效果了。