ÿþÉtape 1: Insérez le code ci-dessous dans la section <head> de votre page: <script type="text/javascript" src="crawler.js"> /* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use updated: 4/2011 for random order option, more (see below) */ </script> Étape 2: Insérez l'échantillon suivant de HTML à votre page, qui montre deux instances du chapiteau chenilles sur la page. Ne pas utiliser des balises <br> ou de bloquer des éléments de niveau dans votre chapiteaux: <div class="marquee" id="mycrawler"> Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles. </div> <script type="text/javascript"> marqueeInit({ uniqueid: 'mycrawler', style: { 'padding': '5px', 'width': '450px', 'background': 'lightyellow', 'border': '1px solid #CC3300' }, inc: 8, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 4, neutral: 150, savedirection: true }); </script> <div class="marquee" id="mycrawler2"> <img src="http://img42.imageshack.us/img42/6331/beachgl.jpg" /> <img src="http://img222.imageshack.us/img222/8854/waterox.jpg" /> <img src="http://img405.imageshack.us/img405/7314/cocovv.jpg" /> <img src="http://img853.imageshack.us/img853/5038/bonsaiy.jpg" /> </div> <script type="text/javascript"> marqueeInit({ uniqueid: 'mycrawler2', style: { 'padding': '2px', 'width': '600px', 'height': '180px' }, inc: 5, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 2, neutral: 150, savedirection: true, random: true }); </script> / * Texte et / ou image sur chenilles Script v1.5 (c) 2009-2011 Scheuer John Davenport que d'abord vu dans http://www.dynamicdrive.com/forums/ Nom d'utilisateur: jscheuer1 - Le présent avis doit rester pour l'utilisation légale Mise à jour: 4 / 2011 pour l'option ordre aléatoire, de plus (voir ci-dessous) * / / * Mise à jour 4 / 2011 pour v1.5 - Ajoute option propriétés aléatoires. Réglez-le à true à utiliser. Corrections plantage du navigateur à partir crawlers vide, et l'image ad logiciel de blocage / routines. Corrections de certains comportements de rupture IE script si une image est manquante. Ajoute des attributs alt pour les images sans leur aide au diagnostic de manquer / corrompus images. Cela peut être désactivée avec l'option de propriété noAddedAlt nouvelle true. Fonctionnement interne amélioré pour une plus grande rapidité d'exécution, moins d'utilisation de la mémoire. * / ///////////////// Pas besoin d'éditer - La configuration se fait dans l'appel à la page Le (s) ///////////////// Fonction marqueeInit (config) { si le retour (document.createElement!); marqueeInit.ar.push (config); marqueeInit.run (config.uniqueid); } (Function () { si le retour (document.createElement!); marqueeInit.ar = []; document.write ('<style type="text/css"> chapiteau. {white-space: nowrap; overflow: hidden; visibility: hidden;}' + '# Marq_kill_marg_bord {border: none importante; margin:! 0 important;} <\ / style>'); var c = 0, tTRE = [/ ^ \ s * $ /, / ^ \ s * /, / \ s * $ /, / [^ \ /]+$/], req1 = {«position»: «relative», «dépassement»: «cachés»}, {= defaultconfig style: le style d'objet {/ / par défaut pour chapiteau conteneurs sans style configuré "Marge": '0 auto ' }, direction: «gauche», inc: 2, de la vitesse par défaut / / - incrément de pixels pour chaque itération de mouvement d'un chapiteau de souris: 'pause' / comportement mouseover / par défaut ('pause' 'cursor conduit »ou faux) }, Tiret, ie = false, oldie = 0, ie5 = false, iever = 0; / * @ @ * Cc_on / / * @ If (@ _jscript_version> = 5) ie = true; try {document.documentMode = 2000} catch (e) {}; iever = Math.min (document.documentMode, navigator.appVersion.replace (/^.* MSIE (\ d + \ \ d +).*$/, '$ 1').); if (iever <6) oldie = 1; if (iever <5,5) { Array.prototype.push = function (el) {this [this.length] = el;}; ie5 = true; dash = /(-(.))/; String.prototype.encamel = function (s, m) { s = this; while ((m = dash.exec (s))) s = s.replace (. m [1], m [2] toUpperCase ()); s de retour; }; } @ End @ * / if (! IE5) { dash = /-(.)/ g; Fonction toHump (a, b) {return b.toUpperCase ();}; String.prototype.encamel = function () {this.replace retour (tableau de bord, toHump);}; } if (ie & & iever <8) { marqueeInit.table = []; window.attachEvent ('onload', function () { marqueeInit.OK = true; for (var i = 0; i <marqueeInit.table.length; + + i) marqueeInit.run (marqueeInit.table [i]); }); } Fonction dans le Tableau (el) { while ((el = el.parentNode)) if (el.tagName & & el.tagName.toLowerCase () === 'table') return true; return false; }; marqueeInit.run = function (id) { if (ie & &! marqueeInit.OK & & iever <8 & & dans le Tableau (document.getElementById (id))) { marqueeInit.table.push (id); de retour; } if (! document.getElementById (id)) setTimeout (function () {marqueeInit.run (id);}, 300); d'autre nouvelle Marq (C + +, document.getElementById (id)); } trimTags fonction (tag) { var r = [], i = 0, e; while ((E = tag.firstChild) & & e.nodeType === 3 & & tTRE [0]. test (e.nodeValue)) tag.removeChild (e); while ((E = tag.lastChild) & & e.nodeType === 3 & & tTRE [0]. test (e.nodeValue)) tag.removeChild (e); if ((E = tag.firstChild) & & e.nodeType === 3) e.nodeValue = e.nodeValue.replace (tTRE [1],''); if ((E = tag.lastChild) & & e.nodeType === 3) e.nodeValue = e.nodeValue.replace (tTRE [2],''); while ((e tag.firstChild =)) r [i + +] = tag.removeChild (e); r retour; } Fonction randthem (tag) { var = Els oldie? tag.all: tag.getElementsByTagName ('*'), i = els.length - 1, childels = [], Poteaux = []; pour (i, i> -1; - i) { if (Els [i]. parentNode tag ===) { childels.push (ELS [i]); newels.push (ELS [i] cloneNode (vrai).); } } newels.sort (function () {return 0.5 - Math.random ();}); i = childels.length - 1; pour (i, i> -1; - i) { tag.replaceChild (Poteaux [i], childels [i]); } } Fonction Marq (c, tag) { var p, u, s, a, IMS, ic, i, marqContent, cObj = this; this.mq = marqueeInit.ar [c]; if (this.mq.random) { randthem (tag); } pour (p dans defaultconfig) if ((& & this.mq.hasOwnProperty this.mq.hasOwnProperty (p)) |! |! (this.mq.hasOwnProperty & & this.mq [p])) this.mq [p] = defaultconfig [p]; this.mq.style.width = this.mq.style.width |! | isNaN (parseInt (this.mq.style.width))? '100% ': This.mq.style.width; if (! tag.getElementsByTagName ('img') [0]) this.mq.style.height = this.mq.style.height |! | isNaN (parseInt (this.mq.style.height))? tag.offsetHeight + 3 + "px": this.mq.style.height; d'autre this.mq.style.height = this.mq.style.height |! | isNaN (parseInt (this.mq.style.height))? 'Auto': this.mq.style.height; u = this.mq.style.width.split (/ \ / d); this.cw = this.mq.style.width? [ParseInt (this.mq.style.width), u [u.length - 1]]: ['a']; marqContent = trimTags (tag); tag.className = tag.id =''; tag.removeAttribute ('class', 0); tag.removeAttribute ('id', 0); if (ie) tag.removeAttribute ('className', 0); tag.appendChild (tag.cloneNode (false)); tag.className = ['chapiteau', c]. joignent (''); tag.style.overflow = 'hidden'; this.c = tag.firstChild; this.c.appendChild (this.c.cloneNode (false)); this.c.style.visibility = 'hidden'; a = [[req1, this.c.style], [this.mq.style, this.c.style]]; for (i = a.length - 1; i> -1; - i) pour (p dans un [i] [0]) if ((a [i] [0] & & hasOwnProperty a [i] [0] hasOwnProperty (p)) | |.. (a hasOwnProperty [i] [0])!.) a [i] [1] [p.encamel ()] = a [i] [0] [p]; this.m = this.c.firstChild; if (this.mq.mouse === 'pause') { this.c.onmouseover = function () {cObj.mq.stopped = true;}; this.c.onmouseout = function () {cObj.mq.stopped = false;}; } this.m.style.position = «absolue»; this.m.style.left = '-10000000px'; this.m.style.whiteSpace = 'nowrap'; if (IE5) this.c.firstChild.appendChild ((this.m = document.createElement ('nobr'))); if (! this.mq.noAddedSpace) this.m.appendChild (document.createTextNode ('\ xa0')); for (i = 0; marqContent [i]; + + i) this.m.appendChild (marqContent [i]); if (IE5) = this.m this.c.firstChild; IMS = this.m.getElementsByTagName ('img'); if (ims.length) { pour (IC = 0, i = 0; i <ims.length; + + i) { IMS [i] = style.display 'inline'.; if (! IMS [i]. alt & &! this.mq.noAddedAlt) { IMS [i] = alt (tTRE [3] exec (IMS [i] src)..) | | ('Image #' + [i + 1]).; if (IMS [i] titre!.) {IMS [i] title ='';.} } IMS [i] = style.display 'inline'.; IMS [i] = style.verticalAlign IMS [i] style.verticalAlign | | 'top'..; if (typeof IMS [i]. === complète 'booléen' & & IMS [i]. complète) IC + +; else { IMS [i]. onload = IMS [i]. onerror = function () { if (+ + IC ims.length ===) cObj.setup (c); }; } if (IC === ims.length) this.setup (c); } } d'autre this.setup (c) } Marq.prototype.setup = function (c) { if (this.mq.setup) return; this.mq.setup = this; var s, w, = cObj cette sortie, = 10000; if (this.c.style.height === 'auto') this.c.style.height = this.m.offsetHeight + 4 + 'px'; this.c.appendChild (this.m.cloneNode (true)); this.m = [this.m, this.m.nextSibling]; if (this.mq.mouse === 'cursor conduit') { this.r = this.mq.neutral | | 16; this.sinc = this.mq.inc; this.c.onmousemove = function (e) {cObj.mq.stopped = false; cObj.directspeed (e)}; if (this.mq.moveatleast) { this.mq.inc = this.mq.moveatleast; if (this.mq.savedirection) { if (this.mq.savedirection === 'reverse') { this.c.onmouseout = function (e) { if (cObj.contains (e)) return; cObj.mq.inc = cObj.mq.moveatleast; cObj.mq.direction = cObj.mq.direction === «droit»? «Gauche»: «droit»;} } Else { this.mq.savedirection = this.mq.direction; this.c.onmouseout = function (e) { if (cObj.contains (e)) return; cObj.mq.inc = cObj.mq.moveatleast; cObj.mq.direction = cObj.mq.savedirection;}; } ;} Else this.c.onmouseout = function (e) {if (cObj.contains (e)!) = cObj.mq.inc cObj.mq.moveatleast;}; } d'autre this.c.onmouseout = function (e) {if (! cObj.contains (e)) cObj.slowdeath ();}; } this.w = this.m [0] offsetWidth.; this.m [0] style.left = 0.; this.c.id = 'marq_kill_marg_bord'; this.m [0] = style.top this.m [1] = Math.floor style.top.. ((this.c.offsetHeight -. this.m [0] offsetHeight) / 2 - oldie) + 'px »; this.c.id =''; this.c.removeAttribute ('id', 0); this.m [1] = style.left this.w + 'px'.; s = this.mq.moveatleast? Math.max (this.mq.moveatleast, this.sinc): (this.sinc | | this.mq.inc); while (this.c.offsetWidth> this.w - s & & - sortie) { w = isNaN (this.cw [0])? this.w - s: -. ce cw [0]; if (w <1 | | this.w <Math.max (1, s)) {break;} this.c.style.width = isNaN (this.cw [0])? this.w - s + 'px': -. ce cw [0] + this.cw [1]; } this.c.style.visibility = 'visible'; this.runit (); } Marq.prototype.slowdeath = function () { var cObj = this; if (this.mq.inc) { this.mq.inc -= 1; this.timer = setTimeout (function () {cObj.slowdeath ();}, 100); } } Marq.prototype.runit = function () { var = cObj présent, d = this.mq.direction === «droit»? 1: -1; if (this.mq.stopped | | this.mq.stopMarquee) { setTimeout (function () {cObj.runit ();}, 300); de retour; } if (this.mq.mouse! = 'cursor conduit ») this.mq.inc = Math.max (1, this.mq.inc); if (d * parseInt (this.m [0]. style.left)> = this.w) this.m [0] style.left = parseInt (this.m [1] style.left.) - D * this.w + 'px'.; if (d * parseInt (this.m [1]. style.left)> = this.w) this.m [1] style.left = parseInt (this.m [0] style.left.) - D * this.w + 'px'.; this.m [0] style.left = parseInt (this.m [0] style.left.) + d * this.mq.inc + 'px'.; this.m [1] style.left = parseInt (this.m [1] style.left.) + d * this.mq.inc + 'px'.; setTimeout (function () {cObj.runit ();}, 30 + (this.mq.addDelay | | 0)); } Marq.prototype.directspeed = function (e) { e = e | | window.event; if (this.timer) clearTimeout (this.timer); var c = this.c, w = c.offsetWidth, l = c.offsetLeft, F = (typeof e.pageX === 'numéro'? e.pageX: e.clientX + + document.body.scrollLeft document.documentElement.scrollLeft) - l, lb = (w - this.r) / 2, rb = (w + this.r) / 2; while ((c = c.offsetParent)) mp -= c.offsetLeft; this.mq.direction = PF> rb? «Gauche»: «droit»; this.mq.inc = Math.round ((PF> rb (mp - RB): pf lb <(lb - mp):? 0) / lb * this.sinc); } Marq.prototype.contains = function (e) { if (E & e.relatedTarget &) {var c = e.relatedTarget; si (c === this.c) return true; while ((c = c.parentNode)) si (c === this.c) return true;} return false; } redimensionner function () { for (var s, w, m, i = 0; i <marqueeInit.ar.length; + + i) { if (marqueeInit.ar [i] & & marqueeInit.ar [i]. setup) { m = marqueeInit.ar [i] configuration.; s = m.mq.moveatleast? Math.max (m.mq.moveatleast, m.sinc): (m.sinc | | m.mq.inc); mcstyle.width = m.mq.style.width; m.cw [0] = m.cw.length> 1? parseInt (m.mq.style.width): 'a'; while (mcoffsetWidth> MW - s) { w = isNaN (m.cw [0])? MW - s: -. m cw [0]; if (w <1) {break;} mcstyle.width = isNaN (m.cw [0])? MW - s + 'px': -. m cw [0] + m.cw [1]; } } } } if (window.addEventListener) window.addEventListener ('resize', redimensionner, false); else if (window.attachEvent) window.attachEvent ('onresize, redimensionner); })();