Menu

물결치듯 변하는 이미지

2016. 6. 1. 00:11

안개핑 Javascript

 

 

<html>
<head>
<title>물결치듯 변하는 이미지</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 각각의 이미지 경로
// 추가시는 그대로 복사하되 이미지 경로만 바꾸어주면 된다.
var imgsname = new Array()
imgsname[0]="http://lia.pe.kr/java Tip/imge/6.jpg"
imgsname[1]="http://lia.pe.kr/java Tip/imge/10.jpg"
imgsname[2]="http://lia.pe.kr/java Tip/imge/20020516185006.jpg"

// 각각의 이미지에 연결된 URL
// 추가시는 그대로 복사하되 URL만 바꾸어주면 된다.
var imgsurl = new Array()
imgsurl[0]="http://lia.pe.kr"
imgsurl[1]="http://lia.pe.kr"
imgsurl[2]="http://lia.pe.kr"

var linktarget="_blank" // 링크 타겟
var pause=3 // 완성된 이미지가 보여지는 시간 (초단위)
var posleft=10 // 브라우저 왼쪽과 이미지사이의 공간
var postop=10 // 브라우저 위쪽과 이미지사이의 공간

// 건드리지 말아주세요.
var contentimage=""
var i_image=0
var i_stepwave=0
var i_maxstepwave=40
var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgsname[i]
}
pause=pause*1000

function initiate() {
      contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
    if (document.all) {
waveimage.innerHTML=contentimage
waveimage.style.posLeft=posleft
waveimage.style.posTop=postop
enlargewave()
    }
    if (document.layers) {
        document.waveimage.left=posleft
document.waveimage.top=postop
        changeimage()
    }
}

function enlargewave() {
    if (i_stepwave<=i_maxstepwave) {
    waveimage.filters.wave.phase=i_stepwave
    waveimage.filters.wave.strength=i_stepwave
        waveimage.filters.wave.lightstrength=i_stepwave
    waveimage.filters.wave.freq=i_stepwave
        i_stepwave++
    var timer=setTimeout("enlargewave()",50)
    }
    else {
        clearTimeout(timer)
        changeimage()
    }
}

function reducewave() {
    if (i_stepwave>0) {
    waveimage.filters.wave.phase=i_stepwave
    waveimage.filters.wave.strength=i_stepwave
    waveimage.filters.wave.lightstrength=i_stepwave
    waveimage.filters.wave.freq=i_stepwave
        i_stepwave--
    var timer=setTimeout("reducewave()",50)
    }
    else {
        clearTimeout(timer)
        var timer=setTimeout("enlargewave()",pause)
    }
}

function changeimage() {
    i_image++
    if (i_image>=imgsname.length) {i_image=0}
    contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"

    if (document.all) {
        waveimage.innerHTML=contentimage
        reducewave()
    }
    
    if (document.layers) {
        document.waveimage.document.write(contentimage)
        document.waveimage.document.close()
        var timer=setTimeout("changeimage()",pause)
    }
    
}

if (document.all) {
document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>')
}
if (document.layers) {
document.write('<LAYER NAME="waveimage"></LAYER>')
document.close()
}
window.onload=initiate

//-->
</SCRIPT>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>&nbsp;</p>

</body>
</html>

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

이미지바운딩효과  (0) 2016.06.01
깜박거리는 이미지  (0) 2016.06.01
글자나 이미지를 마우스로 끌어 자리를 옮길수 있습니다  (0) 2016.05.30
레이어를 이용한 이미지 위에 색깔 덧씌우기  (0) 2016.05.30
마우스를 따라 예쁜 이미지들을 잔상으로  (0) 2016.05.30

티스토리툴바