Version complète: jsB@nk » Texte » Animation » Dissocier un message sur l'écran
URL: https://www.javascriptbank.com/float-a-message-across-the-screen.html
Vous pouvez avoir les message glisse à travers une seule fois, si vous voulez, ou vous pouvez modifier le délai entre la glisse sur. Cet Le code JavaScript peut également tenir compte de l'évolution des messages texte.
Version complète: jsB@nk » Texte » Animation » Dissocier un message sur l'écran
URL: https://www.javascriptbank.com/float-a-message-across-the-screen.html
<style type="text/css">#container { position:relative; visibility:hidden; margin:2em auto; width:80%; height:30px; overflow:hidden }#floatDiv { position:absolute; visibility:hidden; width:400px; left:0; top:0; z-index:1; text-align:left; font-weight:bold; color:#337 }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>floatObject.holder = [];// arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null, optional end functionfunction floatObject(id,x,y,dir,sp,d,fn) { this.el = document.getElementById? document.getElementById(id): null; if (!this.el) return; var px = window.opera? 0: "px"; this.id = id; this.xOff = x; this.yOff = y; this.el.style.left = x + px; this.el.style.top = y + px; this.el.style.visibility = "visible"; this.speed = sp; this.ctr = 0; this.active = true; if (fn) this.onFloatEnd = fn; this.delay = d; if (!fn && !d) this.onFloatEnd = function() { this.el = null; this.active = false; }; this.prop = (dir == "left" || dir == "right")? "left": "top"; if (dir == "left" || dir == "up") this.speed = -sp; floatObject.holder[floatObject.holder.length] = this; if (!floatObject.Canvas.width || !floatObject.Canvas.height) floatObject.Canvas = floatObject.getDimensions();}floatObject.prototype.do_float = function() { var cur; switch (this.prop) { case "left": cur = parseInt( this.el.style.left ); if ( ( this.speed > 0 && cur < floatObject.Canvas.width + this.el.offsetWidth ) || ( this.speed < 0 && cur > -this.el.offsetWidth ) ) { this.el.style.left = parseInt(this.el.style.left) + this.speed + "px"; } else { if (this.delay) this.hold_and_reset(this.xOff); this.onFloatEnd(this); } break; case "top": cur = parseInt( this.el.style.top ); if ( ( this.speed > 0 && cur < floatObject.Canvas.height + this.el.offsetHeight ) || ( this.speed < 0 && cur > -this.el.offsetHeight ) ) { this.el.style.top = parseInt(this.el.style.top) + this.speed + "px"; } else { if (this.delay) this.hold_and_reset(this.yOff); this.onFloatEnd(this); } break; }}floatObject.prototype.hold_and_reset = function(nOff) { if ( this.ctr < this.delay/floatObject.callRate ) { this.el.style.visibility = "hidden"; this.ctr++; } else { this.el.style[this.prop] = nOff + "px"; this.el.style.visibility = "visible"; this.ctr = 0; }}floatObject.prototype.onFloatEnd = function(){};floatObject.callRate = 20;floatObject.timer = window.setInterval("floatObject.control()", floatObject.callRate);// Handle all instances with one timer - idea from youngpup.netfloatObject.control = function() { var i, curObj; for (i=0; curObj = floatObject.holder[i]; i++) if ( curObj && curObj.active ) curObj.do_float();}floatObject.Canvas = {}; // See last line of constructor// for obtaining largest of window and document width/heightfloatObject.getDimensions = function() { var winWd=0, winHt=0, docWd=0, docHt=0; if (window.innerWidth) winWd = window.innerWidth - 18;else if (document.documentElement && document.documentElement.clientWidth) winWd = document.documentElement.clientWidth;else if (document.body && document.body.clientWidth) winWd = document.body.clientWidth; if (window.innerHeight) winHt = window.innerHeight - 18;else if (document.documentElement && document.documentElement.clientHeight) winHt = document.documentElement.clientHeight;else if (document.body && document.body.clientHeight) winHt = document.body.clientHeight; if (document.width) docWd = document.width; else if (document.body) docWd = Math.max(document.body.scrollWidth, document.body.offsetWidth); if (document.height) docHt = document.height; else if (document.body) docHt = Math.max(document.body.scrollHeight, document.body.offsetHeight); return { width: Math.max(winWd, docWd), height: Math.max(winHt, docHt) }}if (window.addEventListener) window.addEventListener("resize", function(){ floatObject.Canvas = floatObject.getDimensions() }, "false");else if (window.attachEvent) window.attachEvent("onresize", function(){ floatObject.Canvas = floatObject.getDimensions() } );</script><script type="text/javascript">if (document.getElementById) { // get width of window/doc to place floatDiv off screen on right floatObject.Canvas = floatObject.getDimensions(); if (floatObject.Canvas.width) { // no op6 (?) // arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null new floatObject("floatDiv", floatObject.Canvas.width , 0, "left", 2, 4000); document.getElementById("container").style.visibility = "visible"; }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->