»
EnglishFrenchVietnamese

Print - Highlighter Scroller effect - JavaScriptBank.com

Full version: jsB@nk » Text » Writting » Highlighter Scroller effect
URL: https://www.javascriptbank.com/highlighter-scroller-effect.html

Highlighter Scroller effect © JavaScriptBank.comThis interesting scroller rotates and displays messages by highlighting each one into view, like using a felts to highlight text on a page. Very cool!

Full version: jsB@nk » Text » Writting » Highlighter Scroller effect
URL: https://www.javascriptbank.com/highlighter-scroller-effect.html



JavaScript
<script type="text/javascript">// Highligher Scroller scriptvar tickercontents=new Array()tickercontents[0]='Looking for free JavaScript and resources? Visit <a href="http://JavaScriptBank.com">JavaScriptBank.com</a>!'tickercontents[1]='<a href="http://JavaScriptBank.com">JavaScriptBank.com</a> - Bank of over 2000+ free JavaScripts'var tickdelay=3000 //delay btw messagesvar highlightspeed=10 //10 pixels at a time.////Do not edit pass this line////////////////var currentmessage=0var clipwidth=0function changetickercontent(){crosstick.style.clip="rect(0px 0px auto 0px)"crosstick.innerHTML=tickercontents[currentmessage]highlightmsg()}function highlightmsg(){var msgwidth=crosstick.offsetWidthif (clipwidth<msgwidth){clipwidth+=highlightspeedcrosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"beginclip=setTimeout("highlightmsg()",20)}else{clipwidth=0clearTimeout(beginclip)if (currentmessage==tickercontents.length-1) currentmessage=0else currentmessage++setTimeout("changetickercontent()",tickdelay)}}function start_ticking(){crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlightercrosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElementif (parseInt(crosstick.offsetHeight)>0)crosstickParent.style.height=crosstick.offsetHeight+'px'elsesetTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sakechangetickercontent()}if (document.all || document.getElementById)window.onload=start_ticking</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div style="position:relative;left:0px;top:0px"><span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->