0顶

图片的拉伸翻转特效

稿源：互联网 2022-04-21 16:10:59 点击： 866 撤稿纠错

图片拉伸与翻转效果，换上新图才看得到特效，可自定义图片。

以下讨论的是和特效相关的图片的拉伸翻转特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
第一步：把如下代码加入<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.alixixi.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.alixixi.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.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于图片的拉伸翻转特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080719945.shtml方便下次再访问哦。

·上一篇： 连续滚动的图片
·下一篇： 图片轮换效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

图片的拉伸翻转特效

文章分类LIST >>返回首页

最新游戏

最新新闻