js 动态文字滚动的例子


Posted in Javascript onJanuary 17, 2011
<!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> 
<title>这是一个动态JavaScript文字显示的例子</title> 
<script type="text/JavaScript"> 
var POSITION = 50; 
var DELAY = 150; 
var MESSAGE = "这是一个动态JavaScript文字显示的例子"; 
function bannerObject(){ 
this.msg = MESSAGE; 
this.out = " "; 
this.pos = POSITION; 
this.delay = DELAY; 
this.i = 0; 
this.reset = clearMessage; 
} 
  
function clearMessage(){ 
this.pos = POSITION; 
} 
var scroll = new bannerObject(); 
function scroller(){ 
scroll.out += " "; 
if(scroll.pos>0) 
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++){ 
scroll.out +=" " ; 
} 
if (scroll.pos>= 0) 
scroll.out += scroll.msg; 
else 
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length); 
document.noticeForm.notice.value = scroll.out; 
scroll.out = " "; 
scroll.pos--; 
scroll.pos--; 
if (scroll.pos < -(scroll.msg.length)) { 
scroll.reset(); 
} 
window.setTimeout("scroller()", scroll.delay); 
} 
</script> 
</head> 
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0"> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr><td width="100%"> 
<form name="noticeForm" action=""> 
<p><input type="text" name="notice" size="50" style="background-color: rgb(192,192,192)"/></p> 
</form> 
</td></tr> 
</table> 
</body> 
</html>

在状态栏滚动文字
<!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> 
<title>这是一个跑马灯效果的JavaScript文档-在状态栏</title> 
<script type="text/JavaScript"> 
var msg = "这是一个跑马灯效果的JavaScript文档"; 
var interval = 100; 
var spacelen = 120; 
var space10 = " "; 
var seq = 0; 
function Scroll() { 
len = msg.length; 
window.status = msg.substring(0, seq + 1); 
seq++; 
if (seq >= len) { 
seq = spacelen; 
window.setTimeout("Scroll2();", interval); 
} 
else 
window.setTimeout("Scroll();", interval); 
} 
function Scroll2() { 
var out = ""; 
for (i = 1; i <= spacelen / space10.length; i++) 
out +=space10; 
out = out + msg; 
len = out.length; 
window.status = out.substring(seq, len); 
seq++; 
if (seq >= len) { seq = 0; }; 
window.setTimeout("Scroll2();", interval); 
} 
Scroll(); 
</script> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
JavaScript中的Array对象使用说明
Jan 17 #Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 #Javascript
对xmlHttp对象的理解
Jan 17 #Javascript
对xmlHttp对象方法和属性的理解
Jan 17 #Javascript
Grid得到选择行数据的方法总结
Jan 17 #Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 #Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
element-ui表格数据转换的示例代码
2018/08/24 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Django视图类型总结
2021/02/17 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016七夕情人节感言
2015/12/09 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python