Menu

이미지 웨이브

2016. 6. 2. 10:28

안개핑 Javascript

 

 

- <body> -

<BODY bgcolor="FFFFFF" onLoad="initiate()">

- <body>와 </body> 사이에 넣어주세여 -

<SCRIPT LANGUAGE="JavaScript">
if (document.layers) {
        alert("죄송합니다. 넷스케이프에선 작동하지 않습니다.")
}
 
// 웨이브 효과 사용할 이미지
var imgname="imgwavesea.jpg"
 
// 이미지의 총 가로 크기 (pixels)
var imgwidth=386

// 이미지의 총 세로 크기 (pixels)
var imgheight=216

// 이미지의 위치 (브라우저 좌로부터 픽셀수)
var posleft=5
 
// 이미지의 위치 (브라우저 위로부터 픽셀수)
var postop=5
 
// By assigning values to the variables WaveFromLeft, WaveToRight, WaveFromTop and
// WaveToBottom you can tell the script where the wave-effect within your image shall be applied.
// Trial and error will do it:
 
// 웨이브 효과를 주는 위치 (이미지의 좌로부터 픽셀수)
var WaveFromLeft=0
 
// 웨이브 효과를 주는 위치 (이미지의 끝 : 이미지의 가로 크기를 넣어줌)
var WaveToRight=386
 
// 웨이브 효과를 줄 위치 (호수부분의 위치 : 이미지의 위로부터 픽셀수)
var WaveFromTop=115

 

// 웨이브 효과를 주는 위치 (이미지의 끝 : 이미지의 세로 크기를 넣어줌)
var WaveToBottom=216

// 아래는 수정하지 마세요.
var i_lightstrength=0
var i_freq=8
var i_phase=5
var max_strength=4
var min_strength=2
 
var i_step=1
var i_strength=min_strength
 
function initiate() {
    if (document.all) {
        stillimage.innerHTML="<img src="+imgname+">"
                stillimage.style.posLeft=posleft
                stillimage.style.posTop=postop
                waveimage.innerHTML="<img src="+imgname+">"
                waveimage.style.posLeft=posleft
                waveimage.style.posTop=postop
                var clipleft=WaveFromLeft
                var clipright=WaveToRight
                var cliptop=WaveFromTop
                var clipbottom=WaveToBottom
                document.all.waveimage.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
                setInterval("i_strength=i_strength+i_step;if (i_strength>max_strength)   {i_step=i_step*(-1)}; if (i_strength<min_strength) {i_step=i_step*(-1)}",2000)
                makewave()
    }
        
         if (document.layers) {
        document.stillimage.document.write("<img src="+imgname+">")
                document.stillimage.document.close()
    }
}
 
function makewave() {
        waveimage.filters.wave.phase+=i_phase
        waveimage.filters.wave.strength=i_strength
        waveimage.filters.wave.lightstrength=i_lightstrength
        waveimage.filters.wave.freq=i_freq
        var timer=setTimeout("makewave()",80)
}
</SCRIPT>

<DIV ID="stillimage" style="position:absolute"></DIV>
<DIV ID="waveimage" style="position:absolute; filter:wave();"></DIV>

 

 빨간색으로 된 부분만 수정해주세여