»
EnglishFrenchVietnamese

Print - MagicScroller: add visual magic to your messages - JavaScriptBank.com

Full version: jsB@nk » Text » MagicScroller: add visual magic to your messages
URL: https://www.javascriptbank.com/magicscroller-add-visual-magic-to-your-messages.html

MagicScroller: add visual magic to your messages © JavaScriptBank.comIs this a right-to-left-scroller? Is this a flash-animation? Is this an eyecatching letter-show? We think it is all in one. And above all it is the prove that even a simple scroller can add visual magic to your site. Crossbrowser (Netscape users will see a scroller without the unique multicolor effect.)

Full version: jsB@nk » Text » MagicScroller: add visual magic to your messages
URL: https://www.javascriptbank.com/magicscroller-add-visual-magic-to-your-messages.html



JavaScript
<SCRIPT LANGUAGE="JavaScript"><!-- Beginning of JavaScript -// MagicScroller// Edit the variables below:// Your messages. Add as many as you likevar message=new Array()message[0]="FREE Javascript FROM ABOUT.COM: CLICK HERE."message[1]="JAVASCRIPT TRICKS FROM JSBank: CLICK HERE."// the URLs of your messagesvar messageurl=new Array()messageurl[0]="http://jsbank.topcities.com"messageurl[1]="http://jsbank.topcities.com"// the targets of the links// accepted values are '_blank' or '_top' or '_parent' or '_self'// or the name of your target-window (for instance 'main')var messagetarget=new Array()messagetarget[0]="_blank"messagetarget[1]="_blank"// the images that create the magic effect of the letters.// You can add an image for each message var messageimage=new Array()messageimage[0]="../image/pic191.jpg"messageimage[1]="../image/logojs.gif"// font-color of messages (required for Netscape Navigator)var messagecolor="blue"// distance of the scroller to the left margin of the browser-window (pixels)var scrollerleft=20// distance of the scroller to the top margin of the browser-window (pixels)var scrollertop=20// speed 1: lower means fastervar pause=20// speed 2: higher means fastervar step=4// font-sizevar fntsize=30// font-familyvar fntfamily="Arial"// font-weight: 1 means bold, 0 means normalvar fntweight=1// do not edit the variables belowvar imgpreload=new Array()for (i=0;i<=messageimage.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=messageimage[i]}var scrollerwidth=368var scrollerheight=60var backgroundimagecontentvar clipleft,clipright,cliptop,clipbottom,clipleftbg, cliprightbgvar i_message=0var timervar textwidthvar textcontent=""if (fntweight==1) {fntweight="700"}else {fntweight="100"}function init() {gettextcontent()    if (document.all) {        backgroundimagecontent="<img src='"+messageimage[0]+"' width='"+scrollerwidth+"'>"text.innerHTML=textcontent        textwidth=text.offsetWidthbackgroundimage.innerHTML=backgroundimagecontent        document.all.text.style.height=scrollerheightdocument.all.text.style.posTop=scrollertop        document.all.text.style.filter="chroma(color="+messagecolor+")"        document.all.text.style.posLeft=scrollerleft+scrollerwidthdocument.all.backgroundimage.style.posTop=scrollertop        document.all.backgroundimage.style.posLeft=scrollerleftclipleft=0clipright=0cliptop=0clipbottom=scrollerheight        clipleftbg=scrollerwidth        cliprightbg=scrollerwidthdocument.all.text.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"        document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"        scrolltext()    }if (document.layers) {document.textnetscape.document.write(textcontent)document.textnetscape.document.close()textwidth=document.textnetscape.document.widthdocument.textnetscape.top=scrollertopdocument.textnetscape.left=scrollerleft+scrollerwidthdocument.textnetscape.clip.left=0document.textnetscape.clip.right=0document.textnetscape.clip.top=0document.textnetscape.clip.bottom=scrollerheight        scrolltext()    }}function scrolltext() {    if (document.all) {if (document.all.text.style.posLeft>=scrollerleft-textwidth) {document.all.text.style.posLeft-=stepclipright+=step            clipleftbg-=stepif (clipright>scrollerwidth) {clipleft+=step}            if (document.all.text.style.posLeft<scrollerleft-textwidth+scrollerwidth) {cliprightbg-=step}document.all.text.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"             document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"var timer=setTimeout("scrolltext()",pause)}else {changetext()}}   if (document.layers) {if (document.textnetscape.left>=scrollerleft-textwidth) {document.textnetscape.left-=stepdocument.textnetscape.clip.right+=stepif (document.textnetscape.clip.right>scrollerwidth) {document.textnetscape.clip.left+=step}var timer=setTimeout("scrolltext()",pause)}else {changetext()}}}function changetext() {    i_message++if (i_message>message.length-1) {i_message=0}gettextcontent()if (document.all) {text.innerHTML=textcontenttextwidth=text.offsetWidth        backgroundimagecontent="<img src='"+messageimage[i_message]+"' width='"+scrollerwidth+"'>"        backgroundimage.innerHTML=backgroundimagecontent        document.all.text.style.posLeft=scrollerleft+scrollerwidthclipleft=0clipright=0        clipleftbg=scrollerwidth        cliprightbg=scrollerwidthdocument.all.text.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"        document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"        scrolltext()}if (document.layers) {   document.textnetscape.document.write(textcontent)document.textnetscape.document.close()textwidth=document.textnetscape.document.widthdocument.textnetscape.left=scrollerleft+scrollerwidthdocument.textnetscape.clip.left=0document.textnetscape.clip.right=0        scrolltext()}}function gettextcontent() {textcontent="<span style='position:relative;font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+"'>"textcontent+="<a href="+messageurl[i_message]+" target="+messagetarget[i_message]+">"textcontent+="<nobr><font color="+messagecolor+">"+message[i_message]+"</font></nobr></a></span>"}window.onresize=init;// - End of JavaScript - --></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY onLoad="init()"><DIV ID="backgroundimage" style="position:absolute;left:-2000px;"></DIV><DIV ID="text" style="position:absolute;left:-2000px; background-color:white;filter:chroma(color=black;);"></DIV><DIV ID="textnetscape" style="position:absolute;left:-2000px;"></DIV></BODY> <!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->