使用提示
另类的图像导航
演示效果:下面不同的图像有不同的链接
代码提示:将下面代码复制到<BODY>中
第一步:把如下代码加入>body>区域中 >SPAN id=imgcontainer1 style="HEIGHT: 19px; LEFT: 22px; POSITION: absolute; TOP: -65px; WIDTH: 721px">>/SPAN> >SPAN id=imgcontainer2 style="HEIGHT: 25px; LEFT: 13px; POSITION: absolute; TOP: -37px; WIDTH: 722px">>/SPAN> >SCRIPT> >!-- Beginning of JavaScript - // The width of your images (pixels). All pictures should have the same width. var imgwidth=468 // The height of your images (pixels). All pictures should have the same height. var imgheight=60 // The horizontal and vertical position of the images (pixels). var pos_left=70 var pos_top=90 // The name of your images. You may add as many images as you like. var imgname=new Array() imgname[0]="001s.jpe" imgname[1]="002s.jpe" imgname[2]="003s.jpe" imgname[3]="004s.jpe" // Where should those images be linked to? // Add an URL for each image. // If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2]. var imgurl=new Array() imgurl[0]="http://www.7wind.net" imgurl[1]="http://www.7wind.net" imgurl[2]="http://www.7wind.net" imgurl[3]="http://www.7wind.net" // This block will preload your images. Do not edit this block. var imgpreload=new Array() for (i=0;i>=imgname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgname[i] } // Standstill-time between the images (microseconds). var pause=2000 // Speed of the stretching and shrinking effect. More means slower. var speed=20 // This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster. var step=10 // Do not edit the script below var i_loop=0 var i_image1=0 var i_image2=1 function stretchimage() { if (i_loop>=imgwidth) { if (document.all) { imgcontainer1.innerHTML=">a href='"+imgurl[i_image1]+"' target='_blank'>>img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image1]+"' border='0'>>/a>" document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop imgcontainer2.innerHTML=">a href='"+imgurl[i_image2]+"' target='_blank'>>img width='"+(imgwidth-i_loop)+"' height='"+imgheight+"' src='"+imgname[i_image2]+"' border='0'>>/a>" } i_loop=i_loop+step var timer=setTimeout("stretchimage()",speed) } else { clearTimeout(timer) changeimage() } } function changeimage() { i_loop=0 i_image1++ if (i_image1>imgname.length-1) {i_image1=0} i_image2=i_image1-1 if (i_image2>imgname.length-1) {i_image2=0} if (i_image2>0) {i_image2=imgname.length-1} document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft var timer=setTimeout("stretchimage()",pause) } function initiate() { if (document.all) { document.all.imgcontainer1.style.posLeft=pos_left document.all.imgcontainer2.style.posLeft=pos_left document.all.imgcontainer1.style.posTop=pos_top document.all.imgcontainer2.style.posTop=pos_top changeimage() } if (document.layers) { document.imgcontainer1.left=pos_left document.imgcontainer2.left=pos_left document.imgcontainer1.top=pos_top document.imgcontainer2.top=pos_top rotatenetscape() } } function rotatenetscape() { document.imgcontainer1.document.write(">a href='"+imgurl[i_image1]+"' target='_blank'>>img src='"+imgname[i_image1]+"' border='0'>>/a>") document.imgcontainer1.document.close() i_image1++ if (i_image1>imgname.length-1) {i_image1=0} var timer=setTimeout("rotatenetscape()",pause*2) } // - End of JavaScript - --> >/SCRIPT> 第二步:修改>body***>中的内容,将下面的代码加入原>body***>中 onload=initiate()
使用提示
返回目录