js不间断文字滚动

傷城~ 2024-02-17 20:13 19阅读 0赞

不间断文字滚动

Code:

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.  <html xmlns="http://www.w3.org/1999/xhtml">
3.  <head>
4.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5.  <title>无标题文档</title>
6.  </head>
7.  
8.  <body>
9.  <div style="width:543px;height:46px;overflow:hidden; border:\#000 1px solid;" onMouseOver="stop();" onMouseOut="start();">
10. <table width="543" id="scrollimg" border="0" >
11. <tr>
12. <td id="simg"><table width="543" height="21" border="0">
13.  <tr> <td><a href="index.htm">不间断文字滚动</a></td> </tr>  
    
14.  </table></td>
15. <td id="simg1"></td>
16. </tr>
17. </table>
18. 
19. <script LANGUAGE="JavaScript">
20. var tm=null
21. function newsScroll() \{
22. if(scrollimg.parentNode.scrollLeft!=546) //如果滚动的距离不是一整行的宽度就继续滚动  
    
23. scrollimg.parentNode.scrollLeft++;
24. else
25. scrollimg.parentNode.scrollLeft=0
26. \}
27. window.onload=function() \{
28. simgsimg1.innerHTML=simg.innerHTML
29. tm=setInterval('newsScroll()',20) //调节速度  
    
30. \}
31. function stop()
32. \{
33. clearInterval(tm)
34. \}
35. 
36. function start()
37. \{
38. tm=setInterval('newsScroll()',20)
39. \}
40. </script>
41. </body>
42. </html>

关键在于js的newsScroll()函数上，这个是说如果一整行没有滚动玩（width==width），那就滚动一个像素，否则就是说一行滚动完了，哪就把把scrollLeft置零，重新开始滚动。

setInterval是延时函数，后面的数字是多少毫秒后开始调用函数，改动它可以调节滚动的速度。

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关文字滚动效果

果图： ![1136726-20190727135750286-484066540.png][] 代码如下： <style style="text/...

喜欢ヅ旅行/ 2024年04月20日 10:50/ 0 赞/ 81 阅读

相关 js不间断文字滚动

不间断文字滚动 Code: 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

傷城~/ 2024年02月17日 20:13/ 0 赞/ 20 阅读

相关 js实现文字竖向滚动

代码已上传至github github代码地址：https://github.com/Miofly/mio.git 移动端适配 <!DOCTYPE html>

╰+哭是因爲堅強的太久メ/ 2023年05月21日 07:07/ 0 赞/ 15 阅读

相关 html横向自动滚动代码,横向不间断滚动效果代码

完整DIV+CSS+JS不间断横向滚动代码：横向不间断滚动DIV .scroll\_div \{width:600px; height:49px;margin:0 aut

短命女/ 2022年10月05日 12:49/ 0 赞/ 359 阅读

相关文字滚动JS代码

文字滚动特效，还是比较简单的只要弄明白远离，主要是定时器的使用，今天在慕课上看到一个比较好的，滚动好写只要实现scrollTop++就可以，难点在于怎么样实现无限滚动，要理解两

雨点打透心脏的1/2处/ 2022年08月03日 05:15/ 0 赞/ 185 阅读

相关纯JS无间隙文字向上滚动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

旧城等待，/ 2022年06月16日 09:14/ 0 赞/ 166 阅读

相关 10行原生JS实现文字无缝滚动

废话不多说，直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <

向右看齐/ 2022年06月09日 13:11/ 0 赞/ 198 阅读

相关文字滚动

页面代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

秒速五厘米/ 2022年04月03日 13:00/ 0 赞/ 270 阅读

相关文字滚动标签

Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。来介绍下标签的属性滚动方向 direction <!--滚动方向 directi

叁歲伎倆/ 2021年11月29日 16:08/ 0 赞/ 376 阅读

相关向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

朱雀/ 2020年06月25日 08:58/ 0 赞/ 554 阅读