有时看到一些文字由左而右,或是从下而上 显示,现在我来实现这个功能。
从左到右,控制 text-indent就行了;
从下而上,控制 margin-top就行了。
以下是一些代码:
从左到右<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>background position</title>
<style type="text/css" media="screen">
#text {border:1px solid #EEAEEE; width:500px; height:25px; text-indent:500px; overflow:hidden;}
</style>
</head>
<body>
<div id="text"></div>
<script type="text/javascript" charset="utf-8">
function show_text(text) {
var a = document.getElementById('text');
var width = a.clientWidth;
var num = 200;
var i = 1;
a.innerHTML = text;
show_slow = function () {
if (i <= num) {
a.style.textIndent = width - i * (width/num);
i++;
} else {
clearInterval (temp);
}
}
temp = setInterval( show_slow, 100);
}
show_text("hello world ");
</script>
</body>
</html>
从下到上:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>background position</title>
<style type="text/css" media="screen">
#contain {border:1px solid #EEAEEE; width:500px; height:30px; overflow:hidden;}
#text {margin-top:25px; height:auto; width:auto;}
</style>
</head>
<body>
<div id="contain"><div id="text"></div></div>
<script type="text/javascript" charset="utf-8">
function show_text(s) {
var text = document.getElementById('text');
text.innerHTML = s;
var i = 0;
var fn = function () {
if ( i < 10)
text.style.marginTop = (25-i*2) + 'px';
else
clearInterval (temp);
i++;
}
temp = setInterval (fn, 30);
}
show_text('hello world');
</script>
</body>
</html>
分享到:
相关推荐
基于QT的文本滚动显示,实现文本当天滚动的效果
QLabel文本滚动显示
易语言编辑框文本滚动源码。@易语言代码编写例子。
易语言编辑框文本滚动源码.rar
自定义滚动条。textfild控件。as3 textfild动态文本滚动条模型
易语言文本滚动不闪烁源码,文本滚动不闪烁
易语言源码易语言文本滚动不闪烁源码.rar 易语言源码易语言文本滚动不闪烁源码.rar 易语言源码易语言文本滚动不闪烁源码.rar 易语言源码易语言文本滚动不闪烁源码.rar 易语言源码易语言文本滚动不闪烁源码.rar ...
易语言编辑框文本滚动源码,编辑框文本滚动
ActionScript 3动态文本滚动条模型 大家一起学习
文本滚动显示文本滚动显示文本滚动显示文本滚动显示
易语言源码易语言编辑框文本滚动源码.rar 易语言源码易语言编辑框文本滚动源码.rar 易语言源码易语言编辑框文本滚动源码.rar 易语言源码易语言编辑框文本滚动源码.rar 易语言源码易语言编辑框文本滚动源码.rar ...
文本滚动显示.e.rar
文本滚动抽奖程序
易语言源码易语言文本滚动源码.rar 易语言源码易语言文本滚动源码.rar 易语言源码易语言文本滚动源码.rar 易语言源码易语言文本滚动源码.rar 易语言源码易语言文本滚动源码.rar 易语言源码易语言文本滚动源码....
文本滚动抽奖程序学习资料分享c
javascript 间断和不间断文本滚动效果
文本滚动显示.rar
MFC自定义控件,文本滚动横幅。使用起来非常简单