滚动的图片
不用flash也能做出比跑马灯连贯的滚动信息,看上去很流畅,这就是它的本色。
制作方法
将下面的插入针代码复制到<body>~</body>里
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="mq.htm" width="100%"></iframe> <iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="mqhx.htm" width=0></iframe>
将
mq.htm
文件放在同级目录下,文件内容如下
<TABLE border=0 cellPadding=0 cellSpacing=0 align="center"> <TBODY> <TR> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="1.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="2.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="3.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="4.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="5.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="6.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="7.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="8.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="9.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="10.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="1.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="2.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="3.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="4.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="5.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="6.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="7.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="8.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="9.jpg" width=150></TD> <TD width=150><IMG height=100 onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll(); src="10.jpg" width=150></TD></TR></TBODY></TABLE>
将
mqhx.htm
文件放在同级目录下,文件内容如下
<SCRIPT language=JavaScript> <!--// var x = 0; var y = 0; var limdex = 1500; 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>
至此你就可以完成这个实例了,快去试试吧!
相关信息
收集者:
一豪
时 间:2001年10月11日