Keep on going, never give up.

用Javascript实现网页内容水平或垂直滚动

用Javascript实现新闻内容的水平或垂直滚动,主要的优点是我们可以实现自定义滚动风格或特效,应用效果比起传统的marquee更加具有特色,方法也比较简单,主要两个部分,一、是滚动内容部分;二、JS的滚动代码部分,也只有两句话。

一、传统的滚动代码

<marquee scrollamount="2" loop="-1" scrolldelay="0" width="250"><div style="FILTER: glow(color=#FF0000,strength=4); COLOR: #ffffff; HEIGHT: 10px;WIDTH: 750px">用Javascript实现新闻内容的水平滚动!</div></marquee>

传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在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>
                   <script language="javascript">
                           document.write("用Javascript实现新闻内容的水平滚动2");      //新闻内容
                           document.write("用Javascript实现新闻内容的水平滚动3");      //新闻内容                
                   </script>
         </div>
</div>//div标签中的宽度width等参数可以自行调节
<script language=javascript>
function newsScroll() 
 {      
         news.style.pixelLeft=(news.style.pixelLeft-1)%headnew.offsetWidth;//实现不间断滚动
}

 function go()
{
         timer1=setInterval('newsScroll()',30)      //更改第二个参数可以改变速度,值越小,速度越快。
}
go();
</script>
以上就是完整的JS滚动代码,如果想实现垂直滚动,则只需要简单的修改即可,即使用style的pixTop属性即可实现。

更多文章:

Javascript的getYear、getFullYear、getUTCFullYear方法异同

Javascript同时兼容IE和FIREFOX的一些注意点

使用Javascript为网站增加日期时间展示

网页编程中如何动态的添加删除表格行

网页语言ASP.NET、PHP、JSP的特性区别及选择建议

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.