JavaScript制作滚动文本效果

2016-02-20 00:37 6 1 收藏

下面图老师小编要向大家介绍下JavaScript制作滚动文本效果,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)下面是一个跑马灯效果的JavaScript文档。
Test2_1.html
html
head
script Language="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
body
/body
/html本章介绍了JavaScript脚本是如何加入Web页面, 并学习了JavaScript语言中的基本数据类型、变量、常量、操作运算符等。可以看出,对于已经掌握C++语言的人来说,学习JavaScript真是一件非常轻松愉快的事。

来源:http://www.tulaoshi.com/n/20160220/1632262.html

延伸阅读
标签: Web开发
extractNodes函数解决各浏览器的节点计算问题。FireFox把换行符也算成一个节点,很不合理啊。 先用appendChild复制前面的四个节点到底部,使得头尾是一样的内容,以作后用。记得做flash补间循环运动的时候就是这样要头尾一样。 通过setInterval隔时运行rolltxt函数。 rolltxt函数首先计算的是间隔停顿的高度,滚动多高就要停顿一下,这个高度...
标签: Web开发
12345678910111213141516171819202122232425262728
标签: Web开发
Firefox, Safari, Opera下,可以用window.getSelection(), 参考MDC IE下,可以用document.selection.createRange().text, 参考MSDN 放在一起: function getSelectionText() {  if(window.getSelection) {   return window.getSelection().toString();  } else if(document.selection && document.selec...
标签: Web开发
现在有一个横向的IFRAME,需要通过点击iframe外的一个图片来横向滚动iframe内的一个html页,但又不想让看见iframe的滚动条,请问如何解决啊????  img   src="demo.gif"   onmousedown="window.timer=setInterval('a.document.body.scrollTop++',10)"   onmouseup="clearInterval(window.timer...
标签: Web开发
!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精彩推荐/title style type="text/css" !-- body{height:20px;line-height:20px;ove...

经验教程

323

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部