当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 小技巧(第六集)

Javascript
javascript 异常处理使用总结
ExtJS扩展 垂直tabLayout实现代码
JavaScript 新手24条实用建议[TUTS+]
PNG背景在不同浏览器下的应用
实现超用户体验 table排序javascript实现代码
利用JQuery为搜索栏增加tag提示
JQuery 前台切换网站的样式实现
WordPress JQuery处理沙发头像
js form 验证函数 当前比较流行的错误提示
JQuery 无废话系列教程(一) jquery入门 [推荐]
jQuery 表单验证插件formValidation实现个性化错误提示
JQuery 入门实例1
jQuery 可以拖动的div实现代码 修正版
javascript DOM对象的学习实例代码
css 二级菜单 实现代码集合 修正版
ExtJS GTGrid 简单用户管理
jQuery DIV弹出效果实现代码
Javascript 调试利器 Firebug使用详解六
深入javascript json QQ网页登陆
类似新浪网的 弹出视频功能实现代码

Javascript 中的 JavaScript 小技巧(第六集)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 187 ::
收藏到网摘: n/a

以下是我们所制作的跑马灯效果的源程序

 <html>
 <head>
 <script language="JavaScript">
 <!-- Hide
 var scrtxt="这儿的讯息可以改为你要告诉别人的话  "+"
 或是注意事项 ...";
 var lentxt=scrtxt.length;
 var width=100;
 var pos=1-width;
 function scroll() {
 pos++;
 var scroller="";
 if (pos==lentxt) {
 pos=1-width;
 }
 if (pos<0) {
 for (var i=1; i<=Math.abs(pos); i++) {
 scroller=scroller+" ";}
 scroller=scroller+scrtxt.substring(0,width-i+1);
 }
 else {
 scroller=scroller+scrtxt.substring(pos,width+pos);
 }
 window.status = scroller;
 setTimeout("scroll()",150);
 }
 //-->
 </script>
 <body onLoad="scroll();return true;">
 Here goes your cool page!
 </body>
 </html>
  此一程式中我们使用了和上面同样的函数(或部分)setTimeout(...)通知,计时器在时间到时去呼叫 scroll()函数,使得跑马灯中的文字往前进一格。 在函数的一开始,有一些较罗嗦的计算部分,但这并不难使我们了解,这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边,让文字部分能尽可能靠右,然后再一字字的将空白减少,结果自然就造成字往前移动的效果了。