»
AnglaisFrançaisVietnamien

Imprimer - Bascule - JavaScriptBank.com

Version complète: jsB@nk » Image » Bascule
URL: https://www.javascriptbank.com/flipflop.html

Bascule © JavaScriptBank.comCe script à tour de rôle "flips» et «flops» entre deux images, avec réglage de la douceur, la vitesse et les pauses. Il mai être utile comme alternative à un fondu enchaîné.

Version complète: jsB@nk » Image » Bascule
URL: https://www.javascriptbank.com/flipflop.html



JavaScript
<script language="JavaScript" type="text/javascript"><!--hide// Colin Patterson (colnrita@westnet.com.au )               //STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENTvar wdmax=120;          //set maximum width of square image (px)var wdmin=0;            //set minimum thickness of edge-on image (px)var inc=5;              //set step change in px (wdmax-wdmin must be a multiple) )These two variablesvar rate = 50;          //pause between steps (in millisec)                      )determine flip-flop speedvar pause = 1000;       //pause between flip and flop (in millisec)var ff="flip";          //initialise whether movement starts with a "flip" (sideways) or "flop" (vertical) change.                     function flipflop() { if (ff=="flip") {  var wd = document.getElementById("pic").getAttribute("width");  wd = wd - inc;  document.getElementById("pic").setAttribute("width",wd);  if (wd==wdmin) {   document.getElementById("pic").setAttribute("src","logojs.gif"); //substitute name of your second picture   inc=-inc;   }  if (wd==wdmax) {   ff="flop";   inc=-inc;   setTimeout("flipflop()",pause);   }   else {   setTimeout("flipflop()",rate);   }  } else {  var ht = document.getElementById("pic").getAttribute("height");  ht = ht - inc;  document.getElementById("pic").setAttribute("height",ht);  if (ht==wdmin) {   document.getElementById("pic").setAttribute("src","logojs.gif"); //substitute name of your first picture   inc=-inc;   }   if (ht==wdmax) {   ff="flip";   inc=-inc;   setTimeout("flipflop()",pause);   }   else {   setTimeout("flipflop()",rate);   }  }}--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<body onload="javascript:flipflop()"></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->