图片的拉伸翻转特效-JS特效-爱易网页

图片的拉伸翻转特效

日期：2014-05-18　浏览次数：20502 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

脚本说明:
第一步：把如下代码加入<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.aiyiweb.com/UploadPic/userface/no1323.jpg"); //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.aiyiweb.com/images/face/image21.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>

</th></TABLE>

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

<a href="http://www.aiyiweb.com/js/">欢迎访问爱易网JS特效</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片的拉伸翻转特效

相关资料更多>

推荐阅读更多>