使用JavaScript实现新闻滚动效果

最新推荐文章于 2023-10-09 22:36:17 发布

jubincn

最新推荐文章于 2023-10-09 22:36:17 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： javascript border layer timer function table

本文链接：https://blog.csdn.net/jubincn/article/details/4689337

版权

本文介绍了如何使用JavaScript和div来实现新闻滚动效果，以替代逐渐被淘汰的Marquee标签。通过利用scrollTop和offsetHeight属性，结合两个div实现内容的循环滚动。提供了两份示例代码，分别展示了不同的实现方式。

摘要由CSDN通过智能技术生成

最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种：

使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。
使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。

使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。下面是我找到的两份示例代码，第一份正是我用的代码，可以运行。第二份我没做测试。写出来是为了做个对比，第二份应该是能用的，因为那是我从网站上摘下来的。

第一份代码