横向滚动图片效果的实现

答案：许久没有接触网页特效了，因为做电子刊物的需要，就找了一段代码来用。记录一下吧。

效果可看这里：http://www.smallrain.net/study_show.asp?id=38
运行代码即可看到演示。
图片从右向左滚动，鼠标停留在某张图片上，滚动停止，点击图片可到相应的页面。

制作方法：
该特效必须依赖内部框架才能实现。
在需要实现滚动的页面部分加入内部框架
<iframe frameborder=no height=120 marginheight=0 marginwidth=0 name=mq scrolling=no src="Untitled-1.htm" width="100%"></iframe>

其中Untitled-1.htm页面是放置特效代码的页面。在此页面中加入如下代码：

<script type="text/javascript"> 
//more javascript from http://www.smallrain.net
document.write('<table align=center width=774 border=0 cellpadding=0 cellspacing=0 style=BORDER-LEFT: #cccccc 1px solid;BORDER-RIGHT: #cccccc 1px solid>'); 
document.write(' <tr> '); 
document.write(' <td width=774 height=120 align=center class=border01 bgcolor=#FFFFFF>'); 
document.write(' <div id=demo style=overflow:hidden;width:750;align=center>'); 
document.write(' <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >'); 
document.write(' <tr>'); 
document.write(' <td valign=top bgcolor=ffffff id=marquePic1> '); 
document.write(' <table width=90% border=0 cellspacing=0 cellpadding=0>'); 
document.write(' <tr align=center> '); 
document.write(' <td><a href=>document.write(' <td><a href=>document.write(' <td><a href=>document.write(' <td><a href=>document.write(' <td><a href=>document.write(' </tr>'); 
document.write(' </table>'); 
document.write(' </td>'); 
document.write(' <td id=marquePic2 valign=top></td>'); 
document.write(' </tr>'); 
document.write(' </table>'); 
document.write(' </div>'); 
document.write(' </td>'); 
document.write(' </tr>'); 
document.write(' </table>'); 
var speed=30 
marquePic2.innerHTML=marquePic1.innerHTML 
function Marquee(){ 
if(demo.scrollLeft>=marquePic1.scrollWidth){ 
demo.scrollLeft=0 
}else{ 
demo.scrollLeft++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 

</script>

img src部分可修改图片的地址和链接地址，可增加alt标签。

上一个：网页制作，该从何学起？
下一个：转贴：内框架Iframe的使用