Full version: jsB@nk » Scrollers » Horizontal scroller » Bounce Scroller
URL: https://www.javascriptbank.com/bounce-style-marquee-script.html
You can use this script as cross-browser replacement for IE's uilt-in MARQUEE tag (which doesn't work in anything except IE). Adjust the various settings in the script to get the effect you want. The 'boxwidth' setting should be set wide enough for the content to bounce.
Full version: jsB@nk » Scrollers » Horizontal scroller » Bounce Scroller
URL: https://www.javascriptbank.com/bounce-style-marquee-script.html
<style type="text/css">body, td{background-color:white;font-size:12px;font-family:sans-serif;color:#00436e;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/*******************************************Bounce Scroller (Marquee Bounce Replacement) v-1.1Brian GosselinVersion notes:V-1.0: Initial release.V-1.1: Removed the need to hardcode the element's width. The script now does this for you.*******************************************///ENTER CONTENT TO SCROLL BELOW.var content='Adjust the various settings in the script to get the effect you want.<br>The "boxwidth" setting should be set wide enough for the content to bounce.';var boxheight=35; // BACKGROUND BOX HEIGHT IN PIXELS.var boxwidth=500; // BACKGROUND BOX WIDTH IN PIXELS.var boxcolor="#ffedcf"; // BACKGROUND BOX COLOR.var speed=30; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..var pixelstep=1; // PIXELS "STEPS" PER REPITITION.//** DO NOT EDIT BEYOND THIS POINT **var outer, inner, elementwidth;var goingright=true;var w3c=(document.getElementById)?true:false;var ns4=(document.layers)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;function getElWidth(el){if(ns4)return (el.document.width)? el.document.width : el.clip.right-el.clip.left;else if(ie4||ie5)return (el.style.width)? el.style.width:el.clientWidth;else if(w3c)return (el.style.width)?parseInt(el.style.width):parseInt(el.offsetWidth);else return -1;}var txt='';if(ns4){txt+='<table border=0 cellpadding=0 cellspacing=0 width='+boxwidth+' height='+boxheight+'><tr><td>';txt+='<ilayer name="outer" bgcolor="'+boxcolor+'" visibility="visible" width="'+boxwidth+'" height="'+boxheight+'" clip="'+boxheight+'">';txt+='<layer name="inner" visibility="hidden" left="2" top="2">';txt+=content;txt+='</layer></ilayer></td></tr></table>';}else{txt+='<div id="outer" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; visibility:visible; background-color:'+boxcolor+'; overflow:hidden; text-align:left" >';txt+='<div id="inner" style="position:absolute; visibility:hidden; left:2px; top:2px; overflow:hidden">';txt+=content;txt+='</div></div>';}document.write(txt);function init(){inner=(ns4)?document.layers['outer'].document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');elementwidth=Math.min(boxwidth-4,getElWidth(inner));if(ns4){document.layers['outer'].clip.height=boxheight;document.layers['outer'].clip.width=boxwidth;inner.clip.width=elementwidth;inner.clip.height=boxheight-4;inner.visibility="show";}else{inner.style.clip='rect(0px, '+elementwidth+'px, '+(boxheight-4)+'px, 0px)';inner.style.visibility="visible";}goingright=true;setInterval('bouncescroll()',speed);}function bouncescroll(){if(ns4){if(inner.left>=(boxwidth-elementwidth))goingright=false;if(inner.left<=2)goingright=true;inner.left=(goingright)?inner.left+pixelstep :inner.left-pixelstep;}else{if(parseInt(inner.style.left)>=(boxwidth-elementwidth))goingright=false;if(parseInt(inner.style.left)<=2)goingright=true;inner.style.left=((goingright)? parseInt(inner.style.left)+pixelstep: parseInt(inner.style.left)-pixelstep)+'px';}}window.onload=init;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->