Phiên bản đầy đủ: jsB@nk » Chữ » Hoạt hóa » Chữ trượt
URL: https://www.javascriptbank.com/float-a-message-across-the-screen.html
Một đoạn mã JavaScript khác để tạo hiệu ứng chữ truợt từ phải sang trái trên website.
Phiên bản đầy đủ: jsB@nk » Chữ » Hoạt hóa » Chữ trượt
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-->