图片的拉伸翻转

图片的拉伸翻转效果,几乎看不出图片的变化
<!-- 脚本说明:-->
<!-- 第一步:把如下代码加入<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","http://www.baron.com.cn/javascript/picture/pic200211061.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","http://www.baron.com.cn/javascript/picture/pic200211062.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="http://www.baron.com.cn/javascript/picture/pic200211062.gif" width="120" height="120" ID="pic">

</th></TABLE>


<!-- 第二步:把<body>中的内容改为:-->
<body  onLoad="javascript:flipflop()">
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值