首頁 > 特效 > 圖片特效 > 正文

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

2011-05-30 圖片特效 ℃

腳本說明:
第一步：把如下代碼加入<body>區(qū)域中
<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>中的內(nèi)容改為：
<body  onLoad="javascript:flipflop()">

相關(guān)特效代碼: 按鈕控制圖片放大縮小特效05/30; 圖片忽大忽小變化特效03/31; 可以用鼠標(biāo)拖動(dòng)的圖片層特效03/31; 拆分后的圖片組合成一張完整的圖特效03/28; 圖片倒影特效03/28; 動(dòng)感圖片特效03/27; 圖片明暗變換特效03/27; 圖片羽化效果特效腳本03/27; 不斷閃爍的圖片網(wǎng)頁特效03/27; 探照燈效果圖片特效代碼03/26

熱門特效代碼: js圖片自動(dòng)切換代碼; CSS實(shí)現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動(dòng)圖片廣告代碼; 鼠標(biāo)經(jīng)過圖片變大; 簡(jiǎn)單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動(dòng)，; 點(diǎn)擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點(diǎn)擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡(jiǎn)單高效的javascript 幻燈片播放; 飄動(dòng)圖片廣告代碼; JavaScript封裝的平滑圖片滾動(dòng)，; 超酷超絢精美圖片展示效果代碼