当前位置:开发者网络 >> 网页特效 >> 图形图象 >> 内容
精彩推荐
分类最新特效
分类热点特效
  
图片翻滚导航 跟随机差不多
日期:2005-06-08   人气:   【字体: 】【收藏此文


<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供! -->
<!-- 要实现此效果需要 3 个步骤: -->

<!-- 第 1 步: -->
<!-- 把下面的代码加到<HEAD></HEAD>区域中: -->

<script>
<!--//

//定义图片的宽度和高度,所有的图片要有相同的尺寸;
var imgwidth=400
var imgheight=250

//下面定义了包含2个图片的数组,数组的下标从0开始,你可以增加任意的图片,按照顺序增加即可,注意相应增加数组下标。
var imgname=new Array()
imgname[0]="../images/404/1.jpg"
imgname[1]="../images/404/2.jpg"

//下面定义图片的url,如果不需要url,将连接值设置为"#";
var imgurl=new Array()

imgurl[0]="http://www.webasp.net"
imgurl[1]="#"

// 先预读图片,不要修改这里;
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}


var pause=2000

//图片的显示速度,数值小速度快;
var speed=20

//下面的参数也会影响图片显示的速度,数值小速度快;代表2个图片的显示间隔。
var step=10

//不要修改下面的代码;
var i_loop=0
var i_image=0

function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
i_loop=imgwidth
clearTimeout(timer)
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"
var timer=setTimeout("shrinkimage()",pause)
}
}

function shrinkimage() {
if (i_loop>=0) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
i_loop=0
clearTimeout(timer)
changeimage()
}
}

function changeimage() {
i_image++
if (i_image>=imgname.length) {i_image=0}
if (document.layers) {
document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
document.imgcontainer.document.close()
}
stretchimage()
}


// -->
</script>
<style>
.containerstyle {
position:absolute;
left:100px;
top:10px;
}
</style>




<!-- 第 2 步: -->
<!-- 把<BODY>中的属性代码改为: -->

<BODY bgcolor="#fef4d9" onLoad="stretchimage()">



<!-- 第 3 步: -->
<!-- 把下面的代码加到<BODY></BODY>区域中: -->

<span id="imgcontainer" class="containerstyle"></span>