实现网页内容水平或垂直滚动的Javascript代码

　　主要两个部分，一、是滚动内容部分；二、JS的滚动代码部分，也只有两句话。

　　一、传统的滚动代码

　　传统的滚动代码应用效果比较单一，而且经常还存在浏览器的兼容性问题，比如在FIREFOX上效果就会出现marquee的特效无效的问题。

　　二、Javascript实现的滚动效果

<div style="width: 300px;overflow: hidden;" onMouseOver="clearInterval(timer1);" onMouseOut="go();"> 
<div style="position: relative;top: 0px;left: 0px;white-space: nowrap;color: #0000FF;" id="news"> 
<span id="headnew">用Javascript实现新闻内容的水平滚动1</span> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Adocument.write(%22%E7%94%A8Javascript%E5%AE%9E%E7%8E%B0%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%E7%9A%84%E6%B0%B4%E5%B9%B3%E6%BB%9A%E5%8A%A82%22)%3B%20%2F%2F%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%20%0D%0Adocument.write(%22%E7%94%A8Javascript%E5%AE%9E%E7%8E%B0%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%E7%9A%84%E6%B0%B4%E5%B9%B3%E6%BB%9A%E5%8A%A83%22)%3B%20%2F%2F%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%20%0D%0A%3C%2Fscript%3E"> 
</div> 
</div>//div标签中的宽度width等参数可以自行调节 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3Djavascript%3E%20%0D%0Afunction%20newsScroll()%20%0D%0A%7B%20%0D%0Anews.style.pixelLeft%3D(news.style.pixelLeft-1)%25headnew.offsetWidth%3B%2F%2F%E5%AE%9E%E7%8E%B0%E4%B8%8D%E9%97%B4%E6%96%AD%E6%BB%9A%E5%8A%A8%20%0D%0A%7D%20%0D%0Afunction%20go()%20%0D%0A%7B%20%0D%0Atimer1%3DsetInterval('newsScroll()'%2C30)%20%2F%2F%E6%9B%B4%E6%94%B9%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E5%8F%AF%E4%BB%A5%E6%94%B9%E5%8F%98%E9%80%9F%E5%BA%A6%EF%BC%8C%E5%80%BC%E8%B6%8A%E5%B0%8F%EF%BC%8C%E9%80%9F%E5%BA%A6%E8%B6%8A%E5%BF%AB%E3%80%82%20%0D%0A%7D%20%0D%0Ago()%3B%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　以上就是完整的JS滚动代码，如果想实现垂直滚动，则只需要简单的修改即可，即使用style的pixTop属性即可实现。

　　摘自天缘博客

教程首页更多教程