用position的fixed的属性，优点是可跟随滚动条，fixed是相对上级有定位属性的来定位的，如果上级没有position就以body来定位。
写法：position:fixed
楼主咋能这样说捏…………这是个很简答的东西…………自己看最后一个javascript函数的注释，页面上的展示是一个DNA式的展示，其实就是两个楼主要求的东西向不同方向开始震动…………
很郁闷，20分钟完成功能，花了一个小时来优化了下代码…………
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>旗帜飘扬.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/htmlcharset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.flaggingStyle {
color: #0066ff
font-family: 隶书
font-size: 24pt
font-weight: normal
}
</style>
<script type="text/javascript">
function flaggingMove(strTargetName, flaggingPosNo, flaggingVolatility, messageLength) {
for (var i = messageLength - 1i >= 1i--) {
document.getElementById("Flag_" + strTargetName + i).style.top = document.getElementById("Flag_" + strTargetName + (i - 1)).offsetTop
}
var target = document.getElementById(strTargetName)
var nowPos = parseInt(target.getAttribute("flaggingPosition"))
var nowDir = parseInt(target.getAttribute("flaggingDrection"))
if (nowPos == flaggingPosNo || nowPos == flaggingPosNo * -1) {
nowDir = nowDir * -1
target.setAttribute("flaggingDrection", nowDir)
}
nowPos = nowPos + nowDir
target.setAttribute("flaggingPosition", nowPos)
document.getElementById("Flag_" + strTargetName + "0").style.top = target.offsetTop + flaggingVolatility * Math.sin(Math.PI * nowPos / 2 / flaggingPosNo)
}
function flaggingReColor(strTargetName, messageLength) {
for (var i = messageLength - 1i >= 1i--) {
document.getElementById("Flag_" + strTargetName + i).style.color = document.getElementById("Flag_" + strTargetName + (i - 1)).style.color
}
document.getElementById("Flag_" + strTargetName + "0").style.color = Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255
}
function startFlagging(strCtrlName, flaggingPosNo, flaggingVolatility, messageLength, flaggingTerm, reColorTerm){
window.setInterval("flaggingMove('" + strCtrlName + "', " + flaggingPosNo + ", " + flaggingVolatility + ", " + messageLength + ")", flaggingTerm)
window.setInterval("flaggingReColor('" + strCtrlName + "', " + messageLength + ")", reColorTerm)
}
/**
* strFlaggingMessage 字符串，信息内容
* textwidth 数字，信息字符的宽度
* flaggingPosNo 数字，半周期变化位置的次数
* startPos 数字，小于等于flaggingPosNo，开始位置
* startDir 数字，1或-1，开始时字符移动的方向（向上或向下）
* flaggingVolatility 数字，字符每次移动的距离，flaggingVolatility*flaggingPosNo*2=字符震动的幅度
* flaggingTerm 数字，字符每隔多少毫秒移动一次，flaggingTerm*flaggingPosNo*4=字符震动的周期
* reColorTerm 数字，字符颜色每隔多少毫秒变化一次
* flaggingClass 字符串，定义字符的css的classname
*/
function flaggingCtrl(strFlaggingMessage, textwidth, flaggingPosNo, startPos, startDir, flaggingVolatility, flaggingTerm, reColorTerm, flaggingClass) {
var strCtrlName = "FlaggingMessageCtl"
if(document.getElementById(strCtrlName)){
var i = 0
while(document.getElementById(strCtrlName + "_" + i)){
i = i + 1
}
strCtrlName = strCtrlName + "_" + i
}
document.write("<span id=\"" + strCtrlName + "\"></span>")
var target = document.getElementById(strCtrlName)
var x = target.offsetLeft
var y = target.offsetTop
target.style.position = "absolute"
target.setAttribute("flaggingPosition", startPos)
target.setAttribute("flaggingDrection", startDir)
var messageArr = strFlaggingMessage.split("")
for (i = 0i <= messageArr.length - 1i++) {
var newSpan = document.createElement("span")
newSpan.innerText = messageArr[i]
newSpan.setAttribute("id", "Flag_" + strCtrlName + i)
newSpan.className = flaggingClass
newSpan.style.position = "absolute"
newSpan.style.top = y
newSpan.style.left = x + i * textwidth
document.body.appendChild(newSpan)
}
startFlagging(strCtrlName, flaggingPosNo, flaggingVolatility, messageArr.length, flaggingTerm, reColorTerm)
}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script type="text/javascript">
flaggingCtrl("准备要像旗帜飘扬般晃动的信息1………………", 35, 4, 0, -1, 50, 35, 300, "flaggingStyle")
</script>
<script type="text/javascript">
flaggingCtrl("准备要像旗帜飘扬般晃动的信息2………………", 35, 4, 0, 1, 50, 35, 300, "flaggingStyle")
</script>
</body>
</html>
