70、图片的拉伸翻转

70、图片的拉伸翻转

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT language="JavaScript" type="text/javascript">

 

<!--hide

 

 

 

               //STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT

 

 

 

var 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 variables

 

var rate = 50;          //pause between steps (in millisec)                      )determine flip-flop speed

 

var 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","pic2.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","pic1.gif"); //substitute name of your first picture

 

   inc=-inc;

 

   }

 

  if (ht==wdmax) {

 

   ff="flip";

 

   inc=-inc;

 

   setTimeout("flipflop()",pause);

 

   }

 

   else {

 

   setTimeout("flipflop()",rate);

 

   }

 

  }

 

}

 

 

 

-->

 

</SCRIPT>

<center>

 

<TABLE border="0">

 

<th width="160" height="160">

 

<IMG src="pic1.gif" width="120" height="120" ID="pic">

 

</th></TABLE>

 

 

第二步:把<body>中的内容改为:

<body  onLoad="javascript:flipflop()">

Write a comment

Comments: 0