首页 > 特效 > 图片特效 > 正文

图片上下左右拉伸效果特效

2011-05-30 图片特效 709℃

脚本说明:
第一步：把如下代码加入<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>

</th></TABLE>

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

相关特效代码: 按钮控制图片放大缩小特效05/30; 图片忽大忽小变化特效03/31; 可以用鼠标拖动的图片层特效03/31; 拆分后的图片组合成一张完整的图特效03/28; 图片倒影特效03/28; 动感图片特效03/27; 图片明暗变换特效03/27; 图片羽化效果特效脚本03/27; 不断闪烁的图片网页特效03/27; 探照灯效果图片特效代码03/26

热门特效代码: js图片自动切换代码; CSS实现区域内等比例放大缩小图片; JS图片切换效果; 飘动图片广告代码; 鼠标经过图片变大; 简单高效的javascript 幻灯片播放; JavaScript封装的平滑图片滚动，; 点击图片出现大图; 图片局部放大效果特效; 图片上下左右拉伸效果特效

推荐特效代码: 点击按钮淡入淡出弹出图文信息; 探照灯效果图片特效代码; 简单高效的javascript 幻灯片播放; 飘动图片广告代码; JavaScript封装的平滑图片滚动，; 超酷超绚精美图片展示效果代码