Version complète: jsB@nk » Browser » Page effet » Document Lingettes effet
URL: https://www.javascriptbank.com/document-wipes-effect.html
Il s'agit d'une intro DHTML effet que «les lingettes" souhaité messages sur l'écran avant de rediriger vers une autre page. Utilisez-le pour fournir une intéressante introduction à n'importe où dans votre site. Similaires en fonction de la dynamique Splash Screen script.
Version complète: jsB@nk » Browser » Page effet » Document Lingettes effet
URL: https://www.javascriptbank.com/document-wipes-effect.html
<style type="text/css"><!--body{ background-color:#white; color:black; overflow:hidden }#skipDiv{position:absolute; visibility:hidden; width:80px; }#skipDiv a:link, #skipDiv a:visited{ font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; color:#dee7f7; }#wipeDiv1{ position:absolute; visibility:hidden; left:0px; top:0px; width:1px; height:1px; z-index:1; }/* Classes for formatting the wipe text content. Wipe class is used in doWipes function. It's the only one needed if all your text is formatted the same. */.wipe { color:black; font-family: verdana, arial, helvetica, sans-serif; }/* If you don't need different sizes, just put a size in the one above (.wipe) and delete unused classes */.wipe1{ font-size:36pt; }.wipe2{ font-size:22pt; }.wipe3{ font-size:18pt; }--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" type="text/javascript">/*Document Wipes effect- By Dynamic Web Coding (www.dyn-web.com)Copyright 2002 by Sharon Paine*/dom = (document.getElementById) ? true : false;ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;ns4 = (document.layers && !dom) ? true : false;ie4 = (document.all && !dom) ? true : false;nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;var origWidth, origHeight;if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight;}// reload or reposition on resizefunction reDo() {if (ns4) { if (window.innerWidth != origWidth || window.innerHeight != origHeight) window.location.reload();} else setTimeout("rePosition()",200);}window.onresize = reDo;function rePosition() {positionBotmRt('skipDiv');if (typeof wipeLyr1!="undefined") wipeLyr1.centerIn(window);//if (typeof wipeLyr2!="undefined") wipeLyr2.centerIn(window);}// for positioning "skip intro" link-layerfunction positionBotmRt(lyr) {var lyrcss = (ns4)? document.layers[lyr]: (ie4)? document.all[lyr].style: (ie5|ns5)? document.getElementById(lyr).style: null;var winWd=(ie4||ie5)? document.body.clientWidth: window.innerWidth;var winHt=(ie4||ie5)? document.body.clientHeight: window.innerHeight;var x=winWd-getWidth(lyrcss,'skipLnk')-16;var y=winHt-getHeight(lyrcss,'skipLnk')-16;lyrcss.left=(ns4)? x: x+"px";lyrcss.top=(ns4)? y: y+"px";lyrcss.visibility = "visible";}var wipe_count=0;// to keep trackfunction doWipes() {if (wipe_count<wipe_array.length) {/////////////////////////////////////////////////////////////////////// This is set up for text on 1 line.// It wraps wipe layer content in table // so you can get rendered width/height.// NOTE: uses nowrap minimized attribute. // If you want to be xhtml valid, you could remove that // and use non-breaking spaces between words instead.var cntnt = '<table id="w1" border="0" cellpadding="0" cellspacing="0"><tr><td class="wipe" nowrap>'+ wipe_array[wipe_count] +'</td></tr></table>';with (wipeLyr1) {hide();// restore, for ns4, or new content is visible...clipTo(0,wipeLyr1.width,wipeLyr1.height,0);writeLyr(cntnt);width=getWidth(wipeLyr1.el,'w1');height=getHeight(wipeLyr1.el,'w1');centerIn(window);}// args: which wipe, delay, wipeTime, what nextwipeLyr1.wipe("in right", wipe_in_delay,wipe_array[wipe_count+1],"wipeOuts()"); } else {// wipes in image, then sends to destination url//wipeLyr2.wipe("in center", wipe_in_logo_delay,wipe_in_logo,"setTimeout('setDest()',dest_delay)"); setTimeout('setDest()',dest_delay);}}function wipeOuts() {wipeLyr1.wipe("out middle", wipe_out_delay,wipe_array[wipe_count+1]/wipe_out_dv,"doWipes()");wipe_count+=2;}// end of wipe-splash code/////////////////////////////////////////////////////////////////////// beginning of wipes.js proper// constructorfunction dynObj(obj) {this.el = (ns4)? getLyrRef(obj,document): (ie4)? document.all[obj]: (ie5||ns5)? document.getElementById(obj): null;this.css = (ns4)? this.el: (ie4||ie5||ns5)? this.el.style: null;this.doc = (ns4)? this.el.document: this.el;this.x = (ns4)? this.css.left: parseInt(this.css.left);this.y = (ns4)? this.css.top: parseInt(this.css.top);this.width = (ns4)? this.el.clip.width: (this.css.width)? parseInt(this.css.width): this.el.offsetWidth;this.height = (ns4)? this.el.clip.height: (this.css.height)? parseInt(this.css.height): this.el.offsetHeight;this.obj = obj + "dynObj"; eval(this.obj + "=this");}// args: which wipe, delay, wipeTime, what next (fn)dynObj.prototype.wipe=function(which,delay,wipeTime,fn) {this.wipeTime=wipeTime; this.fn=fn;switch (which) {// wipe into view by expanding to the rightcase "in right" :this.clipTo(0,0,this.height,0);this.show(); setTimeout(this.obj+".wipe_in_rt()",delay); break;// wipe into view by expanding from the center outcase "in center" :this.vCenter = Math.ceil(this.height/2);this.hCenter = Math.ceil(this.width/2);this.clipTo(this.vCenter, this.hCenter,this.vCenter,this.hCenter);this.show();setTimeout(this.obj+".wipe_in_center()",delay);break;// wipe into view from upper left corner to lower rightcase "in corner" :this.clipTo(0,0,0,0);this.show();setTimeout(this.obj+".wipe_in_corner()",delay);break;// wipe out of view by contracting to the centercase "out center" :this.vCenter = Math.ceil(this.height/2);this.hCenter = Math.ceil(this.width/2);setTimeout(this.obj+".wipe_out_center()",delay);break;// wipe out of view by contracting to the leftcase "out left" :setTimeout(this.obj+".wipe_out_left()",delay);break;// wipe out of view by contracting to the rightcase "out right" :setTimeout(this.obj+".wipe_out_right()",delay); break;// wipe out of view by contracting from left and right case "out middle" :this.dest=Math.ceil(this.width/2); setTimeout(this.obj+".wipe_out_mid()",delay);break;// wipe out of view from the upper left to lower rightcase "out corner" :setTimeout(this.obj+".wipe_out_corner()",delay);break; default:alert("Oops! Check choices again.");}this.wipeStart = new Date().getTime()+delay;this.per = Math.PI/(2*this.wipeTime);}// wipe into view by expanding to the rightdynObj.prototype.wipe_in_rt=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {//wipes could potentially be steady, accelerate, or decelerate//idea and math from Mike Foster at www.cross-browser.com//var inc = this.width*Math.sin(this.per*elapsed);//var inc = -this.width*Math.cos(this.per*elapsed)+this.width;var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,inc,this.height,0);setTimeout(this.obj+".wipe_in_rt()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe into view by expanding from the center outdynObj.prototype.wipe_in_center=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.vCenter*((1/this.wipeTime)*elapsed);var hinc = this.hCenter*((1/this.wipeTime)*elapsed);this.clipTo(this.vCenter-vinc,this.hCenter+hinc,this.vCenter+vinc,this.hCenter-hinc);setTimeout(this.obj+".wipe_in_center()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe into view from upper left corner to lower rightdynObj.prototype.wipe_in_corner=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.height*((1/this.wipeTime)*elapsed);var hinc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,hinc,vinc,0);setTimeout(this.obj+".wipe_in_corner()",35);} else {this.clipTo(0,this.width,this.height,0);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the centerdynObj.prototype.wipe_out_center=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = this.vCenter*((1/this.wipeTime)*elapsed);var hinc = this.hCenter*((1/this.wipeTime)*elapsed);this.clipTo(vinc,this.width-hinc,this.height-vinc,hinc);setTimeout(this.obj+".wipe_out_center()",35);} else {this.clipTo(this.vCenter, this.hCenter,this.vCenter,this.hCenter);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the leftdynObj.prototype.wipe_out_left=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width-inc,this.height,0);setTimeout(this.obj+".wipe_out_left()",35);} else {this.clipTo(0,0,this.height,0);if (this.fn) eval(this.fn);}}// wipe out of view by contracting to the rightdynObj.prototype.wipe_out_right=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var inc = this.width*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width,this.height,inc);setTimeout(this.obj+".wipe_out_right()",35);} else {this.clipTo(0,this.width,this.height,this.width);if (this.fn) eval(this.fn);}}// wipe out of view by contracting from left and rightdynObj.prototype.wipe_out_mid=function() {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {//var inc = this.dest*Math.sin(this.per*elapsed);var inc = -this.dest*Math.cos(this.per*elapsed)+this.dest;//var inc = this.dest*((1/this.wipeTime)*elapsed);this.clipTo(0,this.width-inc,this.height,inc);setTimeout(this.obj+".wipe_out_mid()",35);} else {this.clipTo(0,this.dest,this.height,this.dest);if (this.fn) eval(this.fn);}}dynObj.prototype.wipe_out_corner=function () {var clipVal = this.getClipValues();var elapsed = (new Date().getTime())-this.wipeStart;if (elapsed<this.wipeTime) {var vinc = -this.height*Math.cos(this.per*elapsed)+this.height;var hinc = -this.width*Math.cos(this.per*elapsed)+this.width;this.clipTo(vinc,this.width,this.height,hinc);setTimeout(this.obj+".wipe_out_corner()",35);} else {this.clipTo(this.height,this.width,this.height,this.width);if (this.fn) eval(this.fn);}}// end wipe methods/////////////////////////////////////////////////////////////////////// center in container (window or outer layer)dynObj.prototype.centerIn = function(outer) {var outWd, outHt, inWd, inHt, x, y;if (eval(outer)==window) {outWd=(ie4||ie5)? document.body.clientWidth: window.innerWidth;outHt=(ie4||ie5)? document.body.clientHeight: window.innerHeight;} else {outWd=outer.width;outHt=outer.height;}inWd=this.width;inHt=this.height;x=Math.round((outWd-inWd)/2);y=Math.round((outHt-inHt)/2);this.shiftTo(x,y);}/////////////////////////////////////////////////////////////////////// clip methods// ideas from dynduo, brainjar and brattadynObj.prototype.getClipValues = function() {if (ns4) { var clipVal = new Array();clipVal[0] = this.css.clip.top;clipVal[1] = this.css.clip.right;clipVal[2] = this.css.clip.bottom;clipVal[3] = this.css.clip.left; } else if (ie4||ie5||ns5) {var clipVal = this.css.clip.substring(5,this.css.clip.length-1).split(' ');for (var i=0; i<4; i++) {clipVal[i] = parseInt(clipVal[i]);} }return clipVal;}dynObj.prototype.clipBy = function(top,rt,btm,lft) {if (ns4) { this.css.clip.top += top;this.css.clip.right += rt;this.css.clip.bottom += btm;this.css.clip.left += lft; } else if (ie4 || ie5 || ns5) {var clipVal = this.getClipValues(); this.css.clip = "rect(" + Number(clipVal[0]+top) + "px " + Number(clipVal[1]+rt) + "px " + Number(clipVal[2]+btm) + "px " + Number(clipVal[3]+lft) + "px)" }}dynObj.prototype.clipTo = function(top,rt,btm,lft) {if (ns4) { this.css.clip.top = top;this.css.clip.right = rt;this.css.clip.bottom = btm;this.css.clip.left = lft; } else if (ie4 || ie5 || ns5) { this.css.clip = "rect("+top+"px "+rt+"px "+btm+"px "+lft+"px)"; }}// end clip methodsdynObj.prototype.shiftTo = function (x,y) {// idea from dynduo.if (x!=null) this.x=x; if (y!=null) this.y=y;if (ns4) { this.css.moveTo(this.x,this.y); } else { this.css.left=this.x+"px"; this.css.top=this.y+"px"; }}dynObj.prototype.shiftBy = function(x,y) {this.shiftTo(this.x+x,this.y+y);}dynObj.prototype.show = function() { this.css.visibility = "visible"; }dynObj.prototype.hide = function() { this.css.visibility = "hidden"; }dynObj.prototype.writeLyr=function(cntnt) {if (ns4) {this.doc.write(cntnt);this.doc.close(); } else if (ie4||ie5||ns5) { this.doc.innerHTML = cntnt; }}// gets rendered height/width // for ns4, pass reference to layer. // for others, pass id of html element containing contentfunction getWidth(obj,id) {var wd =(ns4)? obj.document.width: (ie4)? document.all[id].offsetWidth: (ie5||ns5)? document.getElementById(id).offsetWidth: 0;return wd;}function getHeight(obj,id) {var ht =(ns4)? obj.document.height: (ie4)? document.all[id].offsetHeight: (ie5||ns5)? document.getElementById(id).offsetHeight: 0;return ht;}// get reference to nested layer for ns4// from dhtmllib.js by Mike Hall of www.brainjar.comfunction getLyrRef(lyr,doc) {if (ns4) {var theLyr;for (var i=0; i<doc.layers.length; i++) { theLyr = doc.layers[i];if (theLyr.name == lyr) return theLyr;else if (theLyr.document.layers.length > 0) if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)return theLyr; }return null; }}</script><script language="javascript" type="text/javascript"><!--dom = (document.getElementById) ? true : false;ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;ns4 = (document.layers && !dom) ? true : false;ie4 = (document.all && !dom) ? true : false;opr= navigator.userAgent.indexOf("Opera")!=-1nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;//////////////////////////////////////////////////////////////////////////// Customization Area//// If your wipe series includes images, put them in this array for preload, seperated by commas.var wipe_imgs=new Array('dwc_btn.gif');if (document.images) {var theImgs=new Array();for (var i=0;i<wipe_imgs.length;i++) {theImgs[i]=new Image();theImgs[i].src=wipe_imgs[i];}}// Here's where you put the content for the wipes.// Array elements are arranged in pairs:// content to display, time allotted for wipe of that content. // Suggestion: give longer, larger content more time.// If all your text is to be formatted the same, you can use// just the wipe class above (it is applied in the doWipes function)// and put plain text here.// Images and links are okay too.var wipe_array=new Array('<span class="wipe1">JavaScriptBank.com</span>',1000,'<span class="wipe3">Bank of thousands of great dhtml scripts</span>',2500,'<span class="wipe2">This is a cross-browser Wipes effect</span>',2500,'<span class="wipe3"><center>Created by Dynamic Drive<br></center></span>',2500);var wipe_final=new Array('Click here',2500);var wipe_in_delay=1000;// delay before each wipe invar wipe_out_delay=1200;// delay before each wipe out// wipe out speed (wipe-in time is divided by this number)var wipe_out_dv=2.5;// 2 to 4 recommendedvar dest_delay=0;// delay before going to destination url// destination url, where to go at end of wipesfunction setDest() {window.location = "http://JavaScriptBank.com/";}// end customization area/////////////////////////////////////////////////////////////////////if (opr||nodyn)setDest()function initDynLyrs() {// non-capable browsers skip this and go to your urlif (nodyn) setDest();positionBotmRt('skipDiv');wipeLyr1 = new dynObj('wipeDiv1');wipeLyr1.centerIn(window);wipeLyr1.show();//wipeLyr2 = new dynObj('wipeDiv2');//wipeLyr2.centerIn(window);doWipes();}window.onload=initDynLyrs;//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="wipeDiv1"></div><!-- This is for people who don't want to view the animation. Put your href here. --><div id="skipDiv"><a id="skipLnk" href="javascript:setDest()">skip intro</a></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->