Version complète: jsB@nk » Scrollers » Défilement horizontal » Bounce Scroller
URL: https://www.javascriptbank.com/bounce-style-marquee-script.html
Vous pouvez utiliser ce script comme cross-browser de remplacement pour l'IE en uilt tag MARQUEE (qui ne fonctionne pas dans tout, sauf IE). Ajustez les différents paramètres dans le script pour obtenir l'effet souhaité. Le «boxwidth 'paramètre doit être réglé assez large pour le contenu de rebond.
Version complète: jsB@nk » Scrollers » Défilement horizontal » 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-->