收藏本站
| Dm.zznj.com
首 页
|
网页设计教程
|
酷站收藏
|
网页素材
|
特效代码
|
网站推广
|
辅助软件
|
免费资源
|
论坛
|
站内搜索
您的当前位置:
网页特效
>>>
图形特效
>>>图片翻滚导航 跟随机差不多
图片翻滚导航 跟随机差不多
特效说明:
把下列代码加到网页的<Body></Body>标签之间
-------------------------------------------------------------------------------- 脚本说明: 第一步:把如下代码加入区域中 第二步:把如下代码加入区域中
第三步:把区中的内容发言为:
<html><head><Title>图片翻滚导航 跟随机差不多 IK8网页特效演示</title></head>-------------------------------------------------------------------------------- 脚本说明: 第一步:把如下代码加入<head>区域中 <script> <!--// //定义图片的宽度和高度,所有的图片要有相同的尺寸; var imgwidth=400 var imgheight=60 //下面定义了包含2个图片的数组,数组的下标从0开始,你可以增加任意的图片,按照顺序增加即可,注意相应增加数组下标。 var imgname=new Array() imgname[0]="imggum1.jpg" imgname[1]="imggum2.jpg" //下面定义图片的url,如果不需要url,将连接值设置为"#"; var imgurl=new Array() imgurl[0]="http://java2000.126.com" 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> 第二步:把如下代码加入<body>区域中 <span id="imgcontainer" class="containerstyle"></span> 第三步:把<body>区中的内容发言为: <body bgcolor="#fef4d9" onLoad="stretchimage()"> </html>
IK8提供技术支持;本特效来自IK8.com
© CopyRight 2002-2005 ZZNJ.com, Inc. All Rights Reserved
Email: skyzznj@126.com