图片显示(从左上角展开)特效

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>

<!-- http://www.webjx.com -->

<!-- bbs http://bbs.webjx.com -->

<!--要完成此效果需要两个步骤

第一步:把如下代码加入到<body>区域中-->

<script>

<!--

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)

}

}

-->

</script>

<DIV id=imagecontent style="LEFT: -5000px; POSITION: absolute; TOP: -5000px"><IMG height=421 src="http://www.webjx.com/images/12090.gif" width=735></DIV>

<DIV id=image style="POSITION: absolute; TOP: -50px"></DIV>

<!--第二步:把“onload=setValues()”加在<body>标记里

例如:-->

<body onload=setValues()>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航