网络时空 | 网页特效

您现在的位置：首页

图像特效

图片显示特效

特效说明

图片慢慢向右下角出现，同时出现亮点效果，非常酷

特

效

代

码

<body onload=setValues()>
<SCRIPT>
<!-- Beginning of JavaScript -
var imageheight=280
var imagewidth=560

var cliptop
var clipbottom
var clipleft
var clipright
var clippoints
									  
var tempo=100

var stepx=0
var stepy=0
var timer

function setValues() {
	if (document.all) {
		document.all.image.style.posLeft=0
   		document.all.image.style.posTop=0
		document.all.imagecontent.style.posLeft=0
   		document.all.imagecontent.style.posTop=0
    	moveimage()
	}
}

function moveimage() {
	if (stepx<=imagewidth || stepy<=imageheight) {	
		stepx=stepx+12
		stepy=stepy+6
		image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
		cliptop=0
		clipbottom=stepy
		clipleft=0
		clipright=stepx
		
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.imagecontent.style.clip=clippoints
    	timer=setTimeout("moveimage()",tempo)
	}
	else{
		clearTimeout(timer)
		timer=setTimeout("moveimage2()",tempo)
	}
}

function moveimage2() {
	if (stepx>=0 || stepy>=0) {	
		stepx=stepx-12
		stepy=stepy-6
		image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
		cliptop=0
		clipbottom=stepy
		clipleft=0
		clipright=stepx
		
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.imagecontent.style.clip=clippoints
    	timer=setTimeout("moveimage2()",tempo)
	}
	else{
		stepx=0
		stepy=0
		clearTimeout(timer)
		timer=setTimeout("moveimage()",tempo)
	}
}

// - End of JavaScript - -->

</SCRIPT>
<DIV id=imagecontent style="LEFT: -5000px; POSITION: absolute; TOP: -5000px"><IMG height=421 src="zeta0212.jpg" width=735></DIV>
<DIV id=image style="POSITION: absolute; TOP: -50px"></DIV>

@_⌒ 特效预览 @_⌒

预览：