用position的fixed的属性，优点是可跟随滚动条，fixed是相对上级有定位属性的来定位的，如果上级没有position就以body来定位。
写法：position:fixed
代码如下，保存为html后使用<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {}
70% {
/* border-radius: 6% 6% 6% 6%*/
transform: translate(0, 12px)
}
100% {
transform: translate(0, 0px)
/* border-radius: 3% 3% 3% 3%*/
}
}
div {
margin: 0 auto
}
span {
display: inline-block
height: 200px
width: 25px
background-color: red
animation: move 1.4s infinite
}
</style>
</head>
<body>
<div id="spanbox">
</div>
<script>
// 建议最多280
var jxd=280
var spanbox=document.getElementById('spanbox')
var childDom=null
for (var i=0i<jxdi++){
childDom=document.createElement('span')
childDom.style.animationDelay=parseFloat(1.4/jxd*i)+'s'
childDom.style.width=parseFloat(350/jxd)+'px'
spanbox.appendChild(childDom)
}
</script>
</body>
</html>
如果需要更高的精细度修改变量jxd为14的倍速，
楼主咋能这样说捏…………这是个很简答的东西…………自己看最后一个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>
