js实现的文字横向无间断滚动

更新时间：2010年12月30日 19:24:56 作者：

要实现这样一个功能，文字在某块区域内横向无间隙滚动。

我一开始想到的标签是<marquee>，因为它可以实现横向滚动。经理说它的起始位置从最右边出来的，能不能将它改成从中间出来，或者从最左边出来也行。查了相关资料，才知道<marquee>无法指定起始位置。后来在网上找到一段代码，它是用图片来实现的，我将图片改成文字之后，顺利地实现了我所想要的功能。代码如下：

<style type="text/css"> #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} #gongao #scroll_begin, #gongao #scroll_end{display:inline} </style> <script type="text/javascript"> function ScrollImgLeft(){ var speed=50; var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML; function Marquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth; else scroll_div.scrollLeft++; } var MyMar=setInterval(Marquee,speed); scroll_div.onmouseover=function() {clearInterval(MyMar);} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} } </script> <div id="gongao"> <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> <div id="scroll_begin"> ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} </div> <div id="scroll_end"></div> </div> <script type="text/javascript">ScrollImgLeft();</script> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

这里${affiche.content}是从数据库取出来的文字。

之所以在scroll_begin的div里面写这个多重复的文字，是因为这些文字的长度必须要大于scroll_div的div容器。如果小于div容易，则不会有一直滚动的效果。

换句话说：无缝滚动的内容宽度加起来必须要大于容器的宽度。

您可能感兴趣的文章:

相关文章

JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
排序也称排序算法 (Sort Algorithm)，排序是将一组数据，依指定的顺序进行排列的过程。这篇文章主要介绍了数据结构与算法---排序算法(Sort Algorithm),需要的朋友可以参考下
2019-06-06
JavaScript组合模式Composite Pattern
这篇文章主要介绍了学习理解JavaScript组合模式，组合模式及Composite Pattern又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象
2022-04-04
window.onbeforeunload方法在IE下无法正常工作的解决办法
下面的代码可以做到不管用户是点击了关闭，或者是在任务栏关闭、点击后退、刷新、按F5键，都可以检测到用户即将离开的消息。
2010-01-01
JavaScript快速排序(quickSort)算法的实现方法总结
快速排序的思想式分治法,选一个基准点,然后根据大小进行分配,分配然完毕之后,对已经分配的进行递归操作,最终形成快速排序,所以递归也是快速排序思想的一个重要组成部分,本文主要给大家介绍了JavaScript实现快速排序的写法,需要的朋友可以参考下
2023-11-11
js取消单选按钮选中并判断对象是否为空
取消单选按钮选中并判断对象是否为空，在项目中也是比较常见的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
JS留言功能的简单实现案例(推荐)
下面小编就为大家带来一篇JS留言功能的简单实现案例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
浅谈JS的二进制家族
事实上，前端很少涉及对二进制数据的处理，但即便如此，我们偶尔总能在角落里看见它们的身影。今天我们就来聊一聊前端的二进制家族：Blob、ArrayBuffer和Buffer
2021-05-05
JS实现简易贪吃蛇游戏
这篇文章主要为大家详细介绍了JS实现简易贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JS+HTML实现经典游戏吃豆人
吃豆游戏可以说是我们80，90后共同的回忆录，小时候常常在学习机上玩，所以也就有了强烈的欲望去写。所以本文将利用JS+HTML实现这一经典游戏，需要的可以参考一下
2022-04-04
js实现的奥运倒计时时钟效果代码
这篇文章主要介绍了js实现的奥运倒计时时钟效果代码,可实现根据指定时间进行倒计时的实时显示效果,非常简单实用,需要的朋友可以参考下
2015-12-12

最新评论