连续滚动的图片,一般都是用Flash制作,现在我们使用Script制作同样的效果:
制作方法:
单击这里查看一下演示效果 相关文件:2004082021demo.htm 2004082021scroll.htm
在页面<body>~</body>相关位置加入代码: <iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021demo.htm" width="100%"></iframe> <iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021scroll.htm" width=0></iframe> 新建scrollimg-pic.htm页面,插入相同大小的图片若干张。为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次。类似于 2004082021demo.htm 文件。 在每一张的图片上,添加特效: 停顿效果代码:onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()" 手形效果:style="cursor:hand 都添加至<img src="XXX.jpg">,也可以加入图片的超级链接! 再新建2004082021scroll.htm页面文件,该文件为控制图片滚动的页面。在<head>~</head>中,加入代码: <SCRIPT language=JavaScript> <!--// var x = 0; var y = 0; var limdex = 600; var dest = 0; var distance = 0; var step = 0; var destination = 0; var on = true; function scrollit(destination) { step = 2; dest = destination; if (x<dest & x < limdex){ while (x<dest) { step += (step / 7); x += step; parent.frames[0].scroll(x,0); } // top.main.scroll(dest,0); if(dest <=limdex) { parent.frames[0].scroll(dest,0); } x = dest; } if (x > dest) { while (x>dest) { step += (step / 7); if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); } else break; } if(dest >= 0) { parent.frames[0].scroll(dest,0); } x = dest; } if (x<1) { parent.frames[0].scroll(1,0); x=1 } if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex } x = dest; } function scrollnow() { if (on){ if (x < limdex & x >= 0 ) { parent.frames[0].scroll(x,0); x = x + 1; setTimeout('scrollnow()', 8); } else if (x < 0) { x = limdex; scrollnow(); } else { x=0; scrollnow(); } } } // ********************************* // 去掉原来的stopscroll() function stopscroll() { if (on){ on = false; } else { on = true; scrollnow(); } } function startscroll() { on = true; scrollnow(); } function stop_start() { if (on){ on = false;}else { on = true;scrollnow();} } scrollnow(); //*********************************** //--> </SCRIPT> 注意,代码中:var limdex=600; 数字的取值计算为:单张图片的宽度像素 * 使用图片张数 以我们的滚动效果来计算,使用的单张图片宽度为120px,共使用5张,所以var limdex的数字值为600。
连续滚动的图片的特效就制作完成了!
|