javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版

更新时间：2009年12月09日 05:30:24 作者：

javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版，这里提供了两个版本，第二个在firefox下运行有些问题大家可以修改下，第一个的高度问题，已经修正，其实就是简单的加了css样式。

第一个文字上下间隔滚动修正版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>符合WEB标准的文字间隔滚动JS代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style></head> <body> <script> var marqueeContent=new Array(); //滚动新闻 marqueeContent[0]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/html-js.htm" target="_blank">HTML/JS互相转换工具-IE7兼容版</a>'; marqueeContent[1]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/cssyasuo.shtml" target="_blank">css 在线压缩工具</a>'; marqueeContent[2]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/csstidy/css_optimiser.php?lang=zh" target="_blank">CSS整形与最佳化工具[压缩] </a>'; marqueeContent[3]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/jsmin/index.htm" target="_blank">JS Minifier js压缩</a>'; var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 var marqueeId=0; var marqueeDelay=2000; //更新时间,毫秒 var marqueeHeight=18; //容器高度 //接下来的是定义一些要使用到的函数 function initMarquee() { var str=marqueeContent[0]; document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px;line-height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); } function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(document.getElementById("marqueeBox").childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; document.getElementById("marqueeBox").appendChild(nextLine); } else { document.getElementById("marqueeBox").childNodes[0].innerHTML=str; document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); document.getElementById("marqueeBox").scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee() { document.getElementById("marqueeBox").scrollTop++; if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ clearInterval(marqueeInterval[1]); } } initMarquee(); </script> </body> </html>

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

第二个firefox下运行有些问题。但学习js的朋友可以看下主要是看思路。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS文字间隔性滚动代码_适合做公告</title> <meta name="keywords" content="文字滚动,间隔滚动,文字上翻,JS代码" /> <meta name="description" content="JS实现文字间隔性滚动效果，适合做公告。" /> <style type="text/css">  </style> </head> <body> <div id="shangfan"> <div id="holder"> <ul> <li><a href="https://www.jb51.net/tools/packer.htm" target="_blank">packer_至强的javascript在线加密工具</a></li> <li><a href="https://www.jb51.net/tools/bihe/index.htm" target="_blank">XHTML 代码嵌套查看工具[标签闭合]</a></li> <li><a href="https://www.jb51.net/tools/jinzhi.htm" target="_blank">脚本之家 在线进制转换 可以实现各类进制间</a></li> <li><a href="https://www.jb51.net/tools/js_Debug.htm" target="_blank">在线JS脚本校验器检测js错误 </a></li> <li><a href="https://www.jb51.net/tools/htmlto.htm" target="_blank">将html转换为php,javascript和asp的在线工具</a></li> </ul></div> </div> <script type="text/javascript"> function marquee(height,speed,delay){ var scrollT; var pause = false; var ScrollBox = document.getElementById("shangfan"); if(document.getElementById("holder").offsetHeight <= height) return; var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2') ScrollBox.innerHTML += _tmp; ScrollBox.onmouseover = function(){pause = true} ScrollBox.onmouseout = function(){pause = false} ScrollBox.scrollTop = 0; function start(){ scrollT = setInterval(scrolling,speed); if(!pause) ScrollBox.scrollTop += 2; } function scrolling(){ if(ScrollBox.scrollTop % height != 0){ ScrollBox.scrollTop += 2; if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0; } else{ clearInterval(scrollT); setTimeout(start,delay); } } setTimeout(start,delay); } marquee(24,30,3000); </script> </body> </html>

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

您可能感兴趣的文章:

详解JavaScript常用的Hook脚本
这篇文章主要介绍了JavaScript常用的Hook脚本,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
javascript实现获取图片大小及图片等比缩放的方法
这篇文章主要介绍了javascript实现获取图片大小及图片等比缩放的方法,涉及javascript针对图形图像相关属性获取与修改相关操作技巧,需要的朋友可以参考下
2016-11-11
深入理解Javascript中的作用域链和闭包
之前我们讲到数组遍历, 本文我们更进一步, 讲讲如何提高遍历的效率. 下面这篇文章主要深入的介绍了Javascript中作用域链和闭包的相关资料，需要的朋友可以参考下
2017-04-04
微信小程序实现手势解锁的示例详解
手势解锁是生活中常用的解锁方式，本文将通过微信小程序实现手势解锁这一功能，本实例以工具的形式可以嵌入到不同的项目之中，感兴趣的可以了解一下
2022-04-04
JavaScript中的对象的extensible属性介绍
这篇文章主要介绍了JavaScript中的对象的extensible属性介绍,JavaScript中，对象的extensible属性用于表示是否允许在对象中动态添加新的property,需要的朋友可以参考下
2014-12-12
微信小程序常用表单组件的使用详解
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下
2022-03-03
Bootstrap树形组件jqTree的简单封装
这篇文章主要介绍了Bootstrap树形组件jqTree的简单封装，封装一个稍微完整点的树形组件，感兴趣的小伙伴们可以参考一下
2016-01-01
webpack4手动搭建Vue开发环境实现todoList项目的方法
这篇文章主要介绍了webpack4手动搭建Vue开发环境实现todoList项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解
WebView在加载H5页面时,可能会因为缓存机制导致用户看到旧版本的页面,这篇文章主要介绍了如何解决Webview和H5缓存问题确保每次加载最新版本的资源的相关资料,需要的朋友可以参考下
2025-02-02
es6中的import导入模块和 export导出模块详解
require 是 CommonJS 模块系统中用于导入模块的关键字,采用同步加载方式；而 import 和 export 是 ES6 模块系统中用于导入和导出模块的关键字,采用静态加载方式,并且支持异步加载,这篇文章主要介绍了es6中的import导入模块和 export导出模块,需要的朋友可以参考下
2023-11-11