文本滚动

ipython · 发表于 2013-2-8 00:42:54

有时看到一些文字由左而右，或是从下而上显示，现在我来实现这个功能。
从左到右，控制 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>

		自动登录	找回密码
密码			立即注册

文本滚动

浏览过的版块